Avoiding unnecessary network requests with Apollo Client
Tags: graphql, react, javascript, performance
Published: 2021-06-03 00:06:18

Hey, 👋 I'm Juliani and I work as a Front End Engineer at [Thinkific](https://www.thinkific.com/). Here at Thinkific, we've been using [GraphQL](https://graphql.org/) 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**;

![Job dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdytm0znranpy41f3pd5.gif)

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

![Adding a new job post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4al6q989x7kpobawy7xw.gif)

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.

```js 
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](https://www.apollographql.com/docs/react/caching/cache-interaction/), 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 📈. 


![That's all folks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t1vkglu76pgtez850te.gif)