Build a Full-Stack App With React, GraphQL, MongoDB, and Apollo

Updated: Apr 26



Full-Stack App With React, GraphQL, MongoDB, and Apollo

I decided to use my quarantine time to write an article about building a small but to-the-point app with React, GraphQL, Apollo, and MongoDB. When I was learning this stack, I had to read from multiple sources, so I will try to put all the information in a single place. Before we start, I would suggest checking the purposes of GraphQL and Apollo because we will be utilizing these directly. We will build two sections in this app: server and client. On the server-side, we will be building a GraphQL API with three queries and one GraphQL mutation that will interact with our hosted MongoDB database for persistency. On the client-side, we will be utilizing React and Apollo to interact with our GraphQL API and GraphQL queries. Let’s start developing. I have created a folder (full-stack-react-apollo-graphql-mongodb) and created two additional folders inside it (client and server). Let’s build our back end first. Go into server’s directory and run: npm init -y With this command, your package.json is ready. Create one more file called app.js. Assuming you have already set up Node.js and MongoDB (we are using hosted MongoDB mlab, but you can use your local MongoDB) in your system, let’s download some essential packages: npm install express express-graphql mongoose And don’t forget to install nodemon in your dev dependencies and add a start script in your package.json: “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1", “start”: “nodemon app.js” } Now let’s set up your MongoDB. I utilized mlab. Here is a snapshot of my configuration:


Open app.js (I use VS Code) and write the following code:


Graphql Imports

For the connection string to connect with MongoDB, I’m using mlab.

Connection with MongoDB

Replace xxx with your creds over mlab.Create Model. This model in app.js should match your MongoDB structure. In my case, I am creating a simple PersonModel with two fields: firstName and lastName.



Person ModelFor these model object fields, we have to define their property types in the GraphQL way. Remember the import we did earlier (GraphQLObjectType)? We’re utilizing that.


Graphql Object Type

PersonTypeTo this point, nothing is critical — just a few mappings. Now we are going to create GraphQL queries and mutations, which are nothing but GraphQL Schema. Let’s decode a GraphQL query:


Graphql Resolver

In the same way, I have created two more queries. The people query will return all people from the MongoDB table, the other will return the person by id, and the third will return the person by their first name:


Graphql People's Query

Now it’s time to create a mutation to add a new record in the DB:

Graphql Mutation


Mutation. Finally, the port details (where our app will run):

Express Graphql Connection

Go to terminal and run: npm start Open Chrome and type “http://localhost:3001/person.” You will see the GraphQL interface to play around with your queries and mutations.


Graphql Example

The left-side panel shows the query and the right-side panel shows the output. Use the play button to run what you write. Cool, let’s try the other query we have written: findById.


findById Example

findByID.You can try the third one yourself. Now let’s test our mutation:


Testing Mutation

Mutation: Notice the query variables. Congratulations! We’ve set up our back-end GraphQL API. For client-side development, create new a React app: npx create-react-app client It’s time to install the required packages: npm install apollo-boost react-apollo Open your client React project and write the following code in your index.js file:


Connecting React with Graphql

index.js.If you’re already familiar with the Context API in React, you understand what this ApolloProvider is doing — just wrapping up your components like a Redux store. So all the child components can now access the data. In my case, the child component is weird, but you can use your App.js/ts component. So basically, I am not putting my parent component in between (App.js in general). I am directly dropping my child component, GettingGraphQLData. In the code above, you can see I have created an object, ApolloClient, that just has a Uri. Later, the ApolloProvider is wrapping the app components. Let’s see what is inside that component. You may not believe how easy that is:


ApolloProvider

Here is the output of this app:


Example on localhost

The output of the application.

Conclusion To recap, we have:

  • Developed a GraphQL API that is capable of querying the database and adding records in the database.

  • Utilized the express-graphql package.

  • Utilized the Apollo Client for connecting our front-end application to interact with our back-end API.

  • And much more.

You should:

  • Use other queries we have created to show data on UI.

  • Try setting up a page to utilize the mutation for adding a new record.

Here is the GitHub repo for reference. If this is your first time, I would say read the article again after 3-4 days and then practice. Stay inside and stay safe. Thanks, Nikhil

27 views

Subscribe to Our Newsletter

© 2023 by BLIO

  • YouTube
  • Instagram
  • reddit-logo-newnew
  • medium-logo
  • LinkedIn
  • github-logo-new
  • Twitter
  • tiktok-logo-newnew
  • Facebook