Build a Simple Web App with Express, React and GraphQL
In this tutorial you’ll use Express.js and React to build a simple web application with GraphQL and secure it using Okta.
Maru
"Simple" ? 
I can’t wait for the difficult one
Hannibal B. Moulvad
Hey man really nice guide! I have a minor problem i would love if you could help me out with. I got to the part of running both the web and the server on the same time with nodemon. But i get his error when running “yarn start” after adding it.
'internal/modules/cjs/loader.js:582 throw err; ^ Error: Cannot find module ‘/Users/hannibalmoulvad/Projects/graphql-express-react/src/server’
Matt Raible
Are you still experiencing this issue? The only thing I can think of is you missed npm install. You might want to compare your project to the completed one on GitHub.
Daniel Montague
I am getting the following error, which I can not seem to rectify even though I am providing the argument the error is referring to:
Unhandled Rejection (AuthSdkError): A clientId must be specified in the OktaAuth constructor to get a token
The function call to the OktaAuth constructer, as far as I can tell from looking through the stack trace and your code is as follows:
const oktaJwtVerifier = new OktaJwtVerifier({
clientId: process.env.REACT_APP_OKTA_CLIENT_ID,
issuer: ${process.env.REACT_APP_OKTA_ORG_URL}/oauth2/default,
});
ivanpatra
hey, i just cannot access the localhost:4000/graphql, any advice?
Matt Raible
Can you compare your code to the example on GitHub and see if you can spot the difference?
Matt Raible
If you clone the example repo and configure it according to its README, does that work?
git clone GitHub - oktadev/okta-graphql-react-express-example: Web App with Express, React and GraphQL
ivanpatra
i start over the tutorial in good internet connection and it’s work. no need to clone that git. thanks
Keralore
Hey,
Need some help here. I am trying to invoke a direct JSON instead of dummy JSON.
//invoke my mycode.js
var Constants = require(’./mycode’);
//retrieve my function value which has JSON
Constants.myFunction
and in my mycode.js I am doing below thing
request({ url: aemBaseUrl }, (error, response, body) => {
//this invokes a new URL and get the JSON response and render it back.
}
But for me this(request url) always get executed as final step and when I try to invoke the Constants.myFunction, it says undefined.
How can I ensure this code piece gets executed before the display? Please guide
Matt Raible
Hello Keralore,
Your question doesn’t seem to have anything to do with this blog post. I recommend asking it on Stack Overflow. There’s a lot more people that will see it there.
Cold Gin
Dude, THANK YOU. This was extremely helpful to me. For anyone who might run into a “graphqlHTTP function not found” error, I had to change:
const graphqlHTTP = require(‘express-graphql’);
to
const { graphqlHTTP } = require(‘express-graphql’);
to get it to work
Daniel Morgner
Hello, first i want to thank you for your great work.
Is it possible to add a filter function to your query with a search input (without search button. like a live search).
So that i can send a query like with (filter: $filter first:3).
I’m using your example for a simple contact book
Matt Raible
I’m sure this is possible, but I’m not sure how to do it off the top of my head. I’d suggest asking this question on Stack Overflow.
Takehiko Yamada
What does => post && achieve? Shouldn’t this only need the new array with the id at the start?
const mapPost = (post, id) => post && ({ id, …post });
I tried without the post && and it works fine.
Thanks for sharing this post on building a simple web app with Express, React, and GraphQL. If you’re interested in optimizing the performance of your React app, I highly recommend checking out React Query. With React Query, you can easily integrate caching and data fetching optimizations into your app. Check out this React Query blog to learn more about React. Thanks again for sharing this tutorial!