Introduction

The MERN (MongoDB, Express.js, React.js, Node.js) stack is a popular choice for building modern web applications. When combined with GraphQL, it becomes an even more powerful toolset for creating efficient and flexible APIs. In this blog post, we'll explore how to implement GraphQL in a MERN stack application, providing you with a step-by-step guide and best practices.

1. Understanding the MERN Stack and GraphQL:

Before we dive into the implementation, let's briefly review the components:

• MongoDB: A NoSQL database for storing our data
• Express.js: A web application framework for Node.js
• React.js: A JavaScript library for building user interfaces
• Node.js: A JavaScript runtime for server-side development
• GraphQL: A query language and runtime for APIs

2. Setting Up GraphQL Server:

GraphQL is the rising star of backend technologies. It’s a popular alternative for REST as an API design paradigm and is becoming the new standard for exposing the data and functionality of a web server.

In this blog, you’ll learn how to build a GraphQL HTTP server entirely from scratch.

You are going to use the following technologies:

• Node.js - as an engine and runtime for our server
• TypeScript - a strongly typed programming language that builds on JavaScript giving you better tooling at any scale
• Apollo Server - Apollo Server is an open-source, spec-compliant GraphQL server that's compatible with any GraphQL client, including Apollo Client. It's the best way to build a production-ready, self-documenting GraphQL API that can use data from any source.

Install the necessary dependencies step by step.

Here is the quick overview about what GraphQL is

1. The GraphQL schema is where your GraphQL types are defined.
2. GraphQL’s types are connected using fields, and they form a graph.
3. The Query, Mutation and Subscription types are special since they act as an entry point to the graph.
4. The GraphQL schema acts as the data provider, and it offers a set of capabilities the consumer can use.
5. To get data from a GraphQL schema, you need to write a GraphQL operation (often referred to as query) that selects the data and fields you need.

So now lets start creating our own GraphQL schema:

At its heart, a schema is a collection of object types that contain fields. Each field has a type of its own. A field's type can be scalar (such as an Int or a String), or it can be another object type.

We declare a type using the type keyword, followed by the name of the type (PascalCase is best practice), then opening brackets to hold its contained fields:

type SpaceCat {
  name: String!
  age: Int
  missions: [Mission]
}

Here is the code-snapshot of GraphQL Schema

graphql-tag is used for syntax highlighting

We're still missing one piece though: how to tell the GraphQL server what to retrieve when we query it. Remember, we don't have multiple specific endpoints to target different types like a REST API does. Instead, we define a special Query type.

The Query type is defined like any other object type:

type Query {
  # Fields go here
}

Now lets create our GraphQL Server.

3. Setting Up GraphQL Client
Lets install apollo client first

• @apollo/client contains pretty much everything we need to build our client, including an in-memory cache, local state management, and error handling.

Here is the our frontend code for creating Apollo Client

Now let's query our post data by creating custom hook:

If your are coming from Tanstack Query then you can easily grasp this custom hook.

Now use the posts data anywhere you want.

const Posts = () => {
  const { loading, error, data } = useQuery(POSTS);

  return (
    <Layout grid>
        {data?.getAllPosts?.map((post) => (
          <PostCard key={track.id} post={post} />
        ))}
    </Layout>
  );
};

And that's it, we have just completed our goal to implement graphql in MERN Stack Application, but this is just the beginning. GraphQL has lots of features like Pagination, Filteration, Passing Query Parameters just like REST API, etc. So try exploring on their official Website. 😁