Enhance customer experiences with Apollo GraphOS


<p>How many routes do you have in your MERN stack? As your API grows with more routes, you may start creating multiple MERN stacks in a backend-for-frontend (BFF) architecture to help manage those routes. In creating additional MERN stacks, are you duplicating code in those BFFs? Using Federated GraphQL to have a single data access layer for your company can help you manage your MERN stack apps and provide an improved developer experience for everyone.</p>



<p>In recent years, GraphQL has gained significant traction in the tech industry thanks to its efficiency and flexibility. GraphQL provides a simple and more dynamic approach to data fetching than traditional RESTful APIs. If you&#8217;ve been building applications using MongoDB, Express, React, and Node.js (<a href="https://www.mongodb.com/mern-stack">the MERN stack</a>), it&#8217;s high time you considered using Apollo Server to make your stack speak GraphQL.</p>



<p>In this post, we will explore how you can modernize your MERN stack application to use GraphQL with Apollo Server. But before we jump into how to do that, why should you?</p>



<h2 class="wp-block-heading"><a href="#why-should-you-add-graphql-to-your-mern-stack" aria-hidden="true" class="aal_anchor" id="why-should-you-add-graphql-to-your-mern-stack"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Why should you add GraphQL to your MERN Stack?</strong></h2>



<p>GraphQL provides many benefits (read more about <a href="https://www.apollographql.com/docs/intro/benefits/">why you should adopt GraphQL</a>) but there are some specific ones for a MERN stack! GraphQL is declarative and provides an easy to understand the connection between your defined schema and your MongoDB queries in code.&nbsp; In your current server, you probably have multiple routes using <code>express.Router</code> that serve the API endpoints for your client app:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import express from &quot;express&quot;;
import db from &quot;../db/conn.mjs&quot;;
import { ObjectId } from &quot;mongodb&quot;;

const router = express.Router();

// This section will help you get a list of all the records.
router.get(&quot;/&quot;, async (req, res) =&gt; {
  let collection = await db.collection(&quot;records&quot;);
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});

// This section will help you get a single record by id
router.get(&quot;/:id&quot;, async (req, res) =&gt; {
  let collection = await db.collection(&quot;records&quot;);
  let query = {_id: new ObjectId(req.params.id)};
  let result = await collection.findOne(query);

  if (!result) res.send(&quot;Not found&quot;).status(404);
  else res.send(result).status(200);
});</code></pre>



<p>This code can become hard to manage as your API grows and this could lead to duplicating code (like your db queries) between routes. It will also be difficult for any new developers coming on to the project. Imagine you have an app-server with hundreds of routes, a new developer onboarding to your team will need to understand how these routes are organized, how they serve different frontend components, and how these map to different database queries. The permutations between these three different pieces of logic could be dizzying to even a seasoned developer.</p>



<p>With GraphQL, you have the flexibility to define the schema and write resolvers that connect to your DB queries:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">//schema.graphql
type Query {
  record(id: ID!): Record
}
type Record {
  id: ID
  name: String
  position: String
  level: String
}</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-">//resolvers.mjs
const resolvers = {
  Query: {
    async record(_, { id }, context) {
      let collection = await db.collection(&quot;records&quot;);
      let query = { _id: new ObjectId(id) };

      return await collection.findOne(query);
    },
    async records(_, __, context) {
      let collection = await db.collection(&quot;records&quot;);
      return await collection.find({}).toArray();
    },
  },
};</code></pre>



<p>Anyone who has worked on a GraphQL project can quickly make the connection and navigate your code structure. You no longer have to manage bespoke endpoints.</p>



<p>If you are using TypeScript in a MERN stack app or microservice, you have the client and server code in the same workspace enabling you to use <a href="https://the-guild.dev/graphql/codegen/docs/getting-started">code generation</a> on your GraphQL schema. This can generate types that can be used on your server’s resolvers and types for your client’s operations, both work seamlessly with <a href="https://www.apollographql.com/docs/apollo-server/workflow/generate-types#setting-up-your-project"><code>@apollo/server</code></a> and <a href="https://www.apollographql.com/docs/react/development-testing/static-typing#setting-up-your-project"><code>@apollo/client</code></a>. In my opinion, this produces part of the ideal developer experience 😍</p>



<p>With GraphQL, you can have your client application make only one request which creates only one invocation of your API. This eliminates the need to manage custom API endpoints and gives a simple to understand pricing on your invocations (i.e. the page was viewed 1M times, so you have 1M invocations of your Function).</p>



<p>So if you are building a MERN stack app or microservice, you should upgrade it to speak GraphQL. Let’s learn how you can quickly do that!</p>



<h2 class="wp-block-heading"><a href="#upgrading-your-server-to-speak-graphql" aria-hidden="true" class="aal_anchor" id="upgrading-your-server-to-speak-graphql"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Upgrading your server to speak GraphQL</strong></h2>



<p>The first step to upgrade your server is to install the necessary GraphQL packages:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-shell-session">npm install @apollo/server @apollo/subgraph graphql graphql-tag</code></pre>



<p><em>Note: We&#8217;re setting up this GraphQL API using <a href="https://www.apollographql.com/docs/federation">Apollo Federation</a>. It&#8217;s important that you secure your subgraph to be used with the <a href="https://www.apollographql.com/docs/router">Apollo Router</a>. For more information on securing your&nbsp;subgraphs with a&nbsp;router, see&nbsp;<a href="https://www.apollographql.com/docs/graphos/graphs/securing-a-subgraph">this article</a>.</em></p>



<p>Next, you’ll need to define a GraphQL schema based on the functionality you want to expose in your MERN stack. In this blog post, we’ll be using the <a href="https://www.mongodb.com/languages/mern-stack-tutorial">MERN stack tutorial</a> as our example.e have a docs tutorial specifically for <code>@apollo/server</code> **LINK ONCE LIVE** if you want to jump straight to that.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>To follow along, register for <a href="https://www.mongodb.com/try?utm_campaign=devrel&amp;utm_source=cross-post&amp;utm_medium=cta&amp;utm_content=apollo-mern&amp;utm_term=stanimira.vlaeva">MongoDB Atlas</a> and deploy a forever-free database cluster. Atlas is MongoDB’s multi-cloud database integrated with a suite of data services. After deploying your free cluster, proceed by cloning the <a href="https://github.com/mongodb-developer/mern-stack-example">MERN stack project</a>. Follow the instructions outlined in the repository to set up and run the Node.js and React applications.</p>
</blockquote>



<p>Continuing from the MERN stack tutorial, we’ll start by defining a schema similar to the routes currently defined. We’re only going to focus on the Query/READ of the schema in this post:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">//schema.graphql
type Query {
  record(id: ID!): Record
  records: [Record]
}

type Record {
  id: ID
  name: String
  position: String
  level: String
}</code></pre>



<p>The resolvers code is going to look similar to some of the code you have already written wherever you define your routes. From the schema defined above, we can pull the routes code into the resolvers:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">//resolvers.mjs
const resolvers = {
  Record: {
    id: (parent) =&gt; parent.id ?? parent._id,
  },
  Query: {
    async record(_, { id }, context) {
      let collection = await db.collection(&quot;records&quot;);
      let query = { _id: new ObjectId(id) };

      return await collection.findOne(query);
    },
    async records(_, __, context) {
      let collection = await db.collection(&quot;records&quot;);
      const records = await collection.find({}).toArray();
      return records;
    },
  },
};

export default resolvers;</code></pre>



<p>Lastly, we need to expose the <code>/graphql</code> route in our express app. In your server.js (or wherever you define your express app), we’ll use <code>@apollo/server</code> to expose the <code>/graphql</code> route:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import express, { json } from &quot;express&quot;;
import &quot;./loadEnvironment.mjs&quot;;
import cors from &quot;cors&quot;;
import gql from &quot;graphql-tag&quot;;
import { ApolloServer } from &quot;@apollo/server&quot;;
import { buildSubgraphSchema } from &quot;@apollo/subgraph&quot;;
import { expressMiddleware } from &quot;@apollo/server/express4&quot;;
import resolvers from &quot;./resolvers.mjs&quot;;
import { readFileSync } from &quot;fs&quot;;

const PORT = 5050;
const app = express();

app.use(cors());
app.use(express.json());

const typeDefs = gql(
  readFileSync(&quot;schema.graphql&quot;, {
    encoding: &quot;utf-8&quot;,
  })
);

const server = new ApolloServer({
  schema: buildSubgraphSchema({ typeDefs, resolvers }),
});
await server.start();

app.use(&quot;/graphql&quot;, cors(), json(), expressMiddleware(server));

app.listen(PORT, () =&gt; {
  console.log(`Server listening on port ${PORT}`);
});</code></pre>



<p>Now you should be able to run your server project and visit <code>/graphql</code> to see Apollo Explorer 🎉. Next we need to upgrade the client project to use GraphQL.</p>



<h2 class="wp-block-heading"><a href="#upgrading-your-client-to-use-graphql" aria-hidden="true" class="aal_anchor" id="upgrading-your-client-to-use-graphql"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Upgrading your client to use GraphQL</strong></h2>



<p>The first step to upgrade your client is to install the necessary GraphQL packages:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-shell-session">npm install @apollo/client graphql</code></pre>



<p>Next, we need to add the <code>ApolloProvider</code> to our React app:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// src/index.js
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider
} from &quot;@apollo/client&quot;;

const client = new ApolloClient({
  uri: &quot;http://localhost:5050/graphql&quot;,
  cache: new InMemoryCache(),
  connectToDevTools: process.env.NODE_ENV == &quot;production&quot; ? true : false
});

const container = document.getElementById(&quot;root&quot;);
const root = createRoot(container);
root.render(
  &lt;React.StrictMode&gt;
    &lt;BrowserRouter&gt;
      &lt;ApolloProvider client={client}&gt;
        &lt;App /&gt;
      &lt;/ApolloProvider&gt;
    &lt;/BrowserRouter&gt;
  &lt;/React.StrictMode&gt;
);</code></pre>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><code>connectToDevTools</code> is what enables us to have the Apollo Client Devtools appear as an “Apollo” tab in your web browser inspector. You wouldn’t want to run this in production.</p>
</blockquote>



<p>Now we’re ready to start utilizing the hooks <code>@apollo/client</code> provides to execute GraphQL operations. You’ll need to pick a UI to start with that is associated with the schema you designed. Since we are doing the query portion of the records, we can hook up the <code>recordList.js</code> to our GraphQL route:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// recordList.js
import React from &quot;react&quot;;
import { Link } from &quot;react-router-dom&quot;;
import { gql, useQuery } from &quot;@apollo/client&quot;;

export const GET_RECORDS = gql`
  query GetRecords {
    records {
      id
      name
      position
      level
    }
  }
`;
const Record = ({ record }) =&gt; {
  return (
    &lt;tr&gt;
      &lt;td&gt;{record.name}&lt;/td&gt;
      &lt;td&gt;{record.position}&lt;/td&gt;
      &lt;td&gt;{record.level}&lt;/td&gt;
    &lt;/tr&gt;
  );
};
export default function RecordList() {
  const { loading, error, data } = useQuery(GET_RECORDS);

  if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
  if (error) return &lt;p&gt;Error : {error.message}&lt;/p&gt;;

  // This following section will display the table with the records of individuals.
  return (
    &lt;div&gt;
      &lt;h3&gt;Record List&lt;/h3&gt;
      &lt;table className=&quot;table table-striped&quot; style={{ marginTop: 20 }}&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Position&lt;/th&gt;
            &lt;th&gt;Level&lt;/th&gt;
            &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          {data?.records.map((record) =&gt; (
            &lt;Record record={record} key={record.id} /&gt;
          ))}
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  );
}</code></pre>



<p>Now you should be able to start your client application and the records will be loaded through your GraphQL route ✨</p>



<p>The next step is to start planning the next UI you want to build or migrate to your new GraphQL route with this iterative process:</p>



<ol class="wp-block-list">
<li>Define the operation and schema &#8211; start with the ideal GraphQL operation for the UI you’re trying to build and write the schema to enable that operation.</li>



<li>In your server project, update the schema and write the necessary resolvers</li>



<li>In your client project, add the operation and add to your UI component</li>
</ol>



<h2 class="wp-block-heading"><a href="#conclusion" aria-hidden="true" class="aal_anchor" id="conclusion"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Conclusion</strong></h2>



<p>In this blog post, we discussed some of the benefits of using GraphQL in a MERN stack application or microservice and how it simplifies the routes defined on the server side. Anyone who has used GraphQL in the past will be able to get up to speed quickly in your project and an upgraded developer experience. We also walked through how you can upgrade your project to speak GraphQL with <code>@apollo/server</code> and <code>@apollo/client</code> in just a couple of steps using the <a href="https://www.mongodb.com/languages/mern-stack-tutorial">MERN stack tutorial</a> as our example. You can check out our docs that go into more depth on setting up the server portion of the project. Additionally, if you’d like to explore MongoDB in a cloud environment, you can register and deploy a free cluster in <a href="https://www.mongodb.com/try?utm_campaign=devrel&amp;utm_source=cross-post&amp;utm_medium=cta&amp;utm_content=apollo-mern&amp;utm_term=stanimira.vlaeva">MongoDB Atlas</a>.</p>



<p>Now that you’ve started your journey into GraphQL, you can start building and iterating on your app faster. You can integrate GraphOS for <a href="https://www.apollographql.com/docs/graphos/delivery/schema-checks">schema checks</a> or <a href="https://www.apollographql.com/docs/graphos/routing/cloud">routing requests across multiple GraphQL services</a>, like a 3rd party GraphQL API you’re integrating with.&nbsp;</p>



<p>You probably will also have questions/choices come up as you build and we’re here to help! Come join us in the <a href="https://discord.gg/cnfjXU92hZ">Apollo Discord Server</a> and ask your questions. You can ping me directly (@watson) or any of the Developer Advocates in there. We plan regular streams that turn into videos on our YouTube and it’s the best place to catch that content first. Hope to see you there!</p>


Modernize your MERN Stack with GraphQL and GraphOS

Backend

Modernize your MERN Stack with GraphQL and GraphOS

A Deep Dive on Apollo Data Sources

Backend

Modernize your MERN Stack with GraphQL and GraphOS

A Deep Dive on Apollo Data Sources

Stay in our orbit