question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Loading query overwrites proxy.writeQuery

See original GitHub issue

This is a re-issue of #1223 (updated using apollo-client v1.4.0, react-apollo v1.4.2 and proxy.writeQuery)

I have a login mutation with an update option that updates my current user query:

const currentUserQuery = gql`
  query currentUser {
    viewer {
      user {
        id
        username
      }
    }
  }
`;

const LoginWithMutation = graphql(loginUserMutation, {
  props: ({ mutate }) => ({
    login: input =>
      mutate({
        variables: { input },
        update: (proxy, { data }) => {
          proxy.writeQuery({
            query: currentUserQuery,
            data: {
              viewer: {
                __typename: 'Viewer',
                user: data.loginUser.user,
              },
            },
          });
        },
      }),
  }),
})(Login);

This works fine in isolation, the currentUser query is updated with the user id and username and my User React component gets the new current user data exactly as is should. However, when I have a current user, my User component renders a UserInfo component which has a currentUserInfo query:

query currentUserInfo($orderBy: [UserInfoOrderByArgs]) {
    viewer {
      user {
        id
        info(orderBy: $orderBy) {
          edges {
            node {
              id
              title
              ...
            }
          }
        }
      }
    }
  }

When this query runs it first has data.loading: true, as it should, but it also updates the result of the currentUser query so the user is null (note that loading for the currentUser query is false, so it’s saying it’s finished loading and has a null user), which gets passed into my User component and causes problems.

Note that this is all happening synchronously: login mutation result updates currentUser query with logged in user > User component gets new current user data and renders the UserInfo component > UserInfo component runs currentUserInfo query > currentUser query is updated with user as null > User component gets new current user data with null user > User component un-mounts UserInfo component.

If I change it so the UseInfo component is rendered asynchronously (with a setTimeout of 0), everything works as it should and currentUser is not updated with user as null.

Also, if the currentUser query is first run because the User component is rendered (and there is a current user, say on a page reload), then the synchronous process works fine. It’s only when it starts with update proxy.writeQuery(...) from the login mutation that the issue arises.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
stale[bot]commented, Aug 22, 2017

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Apollo Client!

0reactions
dardubcommented, Sep 19, 2017

@helfer Was this issue resolved. I’ve come across many issues here that have been closed due to inactivity, but not resolved. It helps keep the issue count down, but many issues are getting lost into the ether it seems.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Reading and writing data to the cache - Apollo GraphQL Docs
The writeQuery method enables you to write data to your cache in a shape that matches a GraphQL query. It resembles readQuery ,...
Read more >
proxy.writeQuery weird behavior - graphql - Stack Overflow
I have a todo app (react-native) with graphql-client connect const client = new ApolloClient({ uri: API, cache: new InMemoryCache() });.
Read more >
Caching in GraphQL: How to prevent excessive and ...
The proxy network can use proxy cache to cache resources ... writeQuery will overwrite the existing object with the new food object.
Read more >
Reading and writing data to the cache - Client (React)
Like writeQuery and writeFragment , modify triggers a refresh of all active queries that depend on modified fields (unless you override this behavior)....
Read more >
bq command-line tool reference | BigQuery - Google Cloud
Specifies the name or IP address of the proxy host to use for connecting to ... table (in a load job or a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found