How to force App to re-render after mutation?

user_3528590 0
Viewed 5553

I have a React app built using Next.js. I want to be able to login and then cause the app to re-render in order for it to attempt to fetch the current logged in user.

My _app.js component is wrapped with the apollo provider and has a get user Query as well: 

class MyApp extends App {

  render() {
    const { Component, pageProps, apolloClient } = this.props;
    return (
      <>
        <Container>
          <ApolloProvider client={apolloClient}>
            <Query query={GET_USER} fetchPolicy="network-only" errorPolicy="ignore">
              {({ loading, data, error }) => console.log("rendering app", data) || (
                <>
                  <Component {...pageProps} user={data && data.me} />
                </>
              )}
            </Query>
          </ApolloProvider>
        </Container>
      </>
    );
  }
}

I then have a login form which simply sends the email and password to my API which then returns a set-cookie token header with the access token.

<Mutation 
    mutation={LOGIN}
    onError={error => {
        this.setState({error: "Incorrect email or password"})
    }}
    onCompleted={() => {
        window.location.reload() // temp solution to cause app to re-render
    }}
>
  {(login, {loading}) => (
    <Login 
        {...this.props} 
        login={login} 
        loading={loading} 
        error={error} 
    />
  )}
</Mutation>

I can successfully log in but I was expecting the Apollo cache to get written to with the user data:

{
  "data": {
    "login": {
      "_id": "abcd1234",
      "accessToken": "abc123",
      "firstName": "First",
      "lastName": "Last",
      "email": "abcd123@b.com",
      "__typename": "User"
    }
  }
}

As the cache is getting written to, I was expecting the _app.js / ApolloProvider children to re-render as they receive props from the cache.

My get user Query should then attempt to run again (this time with the access token set in a cookie) and a user should be returned (indicating the user is logged in).

Why is my mutation not telling my app to re-render onCompleted?

apollo graphql next.js reactjs javascript
1 Answers

This is the perfect scenario for refetchQueries(): https://www.apollographql.com/docs/angular/features/cache-updates/#refetchqueries

In your scenario, you could pass this prop to your Login mutation component to refetch the GET_USER query after login. Export the GET USER from your _app.js (or wherever you're moving it to if you're putting it in a User Hoc). Then in your login mutation:

import { GET_USER } from '...'

<Mutation 
    mutation={LOGIN}
    onError={error => {
        this.setState({error: "Incorrect email or password"})
    }}
    onCompleted={() => {
        window.location.reload() // temp solution to cause app to re-render
    }}
    // takes an array of queries to refetch after the mutation is complete
    refetchQueries={[{ query: GET_USER }]} 
>
  {(login, {loading}) => (
    <Login 
        {...this.props} 
        login={login} 
        loading={loading} 
        error={error} 
    />
  )}
</Mutation>

The other alternative is to use the update method to manually set it to the cache and then keep a reference to that data or retrieve it from the cache with a cache id so you don't have to fetch more data, but the refetchQueries is perfect for simple login mutations like this that aren't too expensive to retrieve.

user_107680750
Related