Should I Directly Access Data From the Apollo Client or From React Component State?

Consider the following code snippet of a React component, 

You may have noticed that the data sent back by the mutation provides the user's information in a 

 field, and any data returned from a successful mutation automatically gets added to the local Apollo Client cache. 

 state variable when we could just access the user's information via the 

 field in the mutation result object? For example, like this:

const [logIn, { error, data }] = useMutation<LogInData, LogInVariables>(...);

This can be considered an anti-pattern, but data can be either 

 or not directly in the body (and rendering section) of the 

component. Even after you determine that 

, you would still need to perform the same number of checks as before for the 

 object with its properties initialized to 

 in the body (and rendering section) of the 

 component (one less check). Additionally, with this approach, you only perform the checks for the data inside the 

You could directly access the cache via the 

 function, which is called after the mutation completes and provides the cache as an argument, like so:

const [logIn, { error }] = useMutation<LogInData, LogInVariables>(..., {
  update: (cache) => { /* Read data from cache. */ }, 
  onCompleted: (data) => { ... } 
});

However, the cache at this point doesn't actually have 

 data in the cache (to confirm this, print 

const [logIn, { error }] = useMutation<LogInData, LogInVariables>(..., {
  update: (cache, { data }) => { /* Read data from cache. */ }, 
  onCompleted: (data) => { ... } 
});

You would need to manually modify the cache so that it has this 

. Once the cached data is updated, the change gets broadcasted across the application and re-renders the components with active queries that correspond to the updated data. So you would need to put into each component that relies on 

. On initial page load, it's an extra, unnecessary network request since the 

 data. But after the initial page load, if the 

 decides to log in or log out, then getting the 

 will be based on the update to the cache and having its updated 

 if it means one less network request on initial page load. As always, it's completely up to you how you want to manage state in your applications, but be sure to evaluate the trade-offs for each possible solution and pick the one that best suits your situation. 

Check out this Codesandbox example to see what I mean:

https://codesandbox.io/embed/mutations-example-app-final-tjoje?fontsize=14&hidenavigation=1&theme=dark

If you want to learn more advanced techniques with TypeScript, GraphQL and React, or learn how to build a production-ready Airbnb-like application from scratch, then check out our 

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

AUTHOR

Ken Chan

Consider the following code snippet of a React component, <App />, that... You may have noticed that the data sent back by the mutation provides the user's information in a logIn field, and any data returned from a successful mutation automatically gets added to the local Apollo Client cache.…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Should I Directly Access Data From the Apollo Client or From React Component State?

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript