Avoiding unnecessary network requests with Apollo Client

Hey, 👋 I'm Juliani and I work as a Front End Engineer at Thinkific. Here at Thinkific, we've been using GraphQL to help us interact with our API and it's been amazing because it gives us the flexibility to request data as needed by our client applications. So, today I wanted to share a way to improve the performance of applications as a whole reducing some network requests that maybe aren't necessary.

Getting started

Let's suppose we have an application that allows employers to create job posts and candidates can see those posts on a job board. In addition, the candidate can see a specific job post and all the ones related to a specific company.

To be able to accomplish that we will need to have three queries.

• one to fetch all the job posts to be able to display them on the main dashboard;
• another one to fetch a specific job's details;
• and last but not least the query to fetch the company information and its job posts;

In addition to the queries, a mutation to create a job post is also required.

When a mutation to create an entity is executed it isn't added automatically to the cache, the same happens when we want to delete an entity or edit multiple entities, the cache isn't touched. Therefore, the UI doesn't reflect the change. So, one common approach I've seen is to use the refetchQueries option to refetch all the queries needed after the mutation has occurred 💔 ❌. That causes new network requests that could be avoided by cache manipulation.

For the create post mutation it could be something like the following. However, I'd recommend using useMutation to follow the most recent changes to the Apollo library.

async function createJob(input) {
  const {
    data: { job },
  } = await createJobPostMutation({
    variables: { input },
    update: (cache, { data }) => {
      cache.writeQuery({
        query: jobQuery,
        variables: { id: data.job.id },
        data,
      });
    },
  });
}

Apollo offers ways to manipulate the cache, which might be beneficial in reducing additional requests to the API.

You can read and write data directly to the Apollo Client cache, without communicating with your GraphQL server. You can interact with data that you previously fetched from your server, and with data that are only available locally.

When using writeQuery, writeFragment or cache.modify it triggers a refresh of all active queries that depend on modified fields and therefore we have the UI up-to-date 💚 ✅.

Any changes you make to cached data with writeQuery and writeFragment are not pushed to your GraphQL server. If you reload your environment, these changes will disappear.

By reducing network requests we can improve our app's performance 📈.