Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loading query overwrites proxy.writeQuery #1759

Closed
rafgraph opened this issue Jun 4, 2017 · 9 comments
Closed

Loading query overwrites proxy.writeQuery #1759

rafgraph opened this issue Jun 4, 2017 · 9 comments
Labels

Comments

@rafgraph
Copy link

rafgraph commented Jun 4, 2017

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.

@rafgraph
Copy link
Author

rafgraph commented Jun 5, 2017

I created a failing example using the error template and Scaphold as a backend:
https://github.com/rafrex/apollo-error-example-issue-1759

git clone, npm install, and npm start should be all you need to get it running.

Login with user for both username and password (pre-filled). It will take you back to the login page because of this issue (current user is overwritten as null). If you refresh the page at this point you will see that you're logged in.

As a workaround, uncomment line 19 to line 25 to load the <UserInfo /> component async.

@helfer
Copy link
Contributor

helfer commented Jun 9, 2017

@RAFREX Thanks for re-opening the issue and providing a reproduction. I will try to find out why null is written to the store when the currentUserInfo query is still loading.

@helfer helfer added the 🐞 bug label Jun 9, 2017
@rafgraph
Copy link
Author

Great, thanks!

@ctavan
Copy link

ctavan commented Jun 23, 2017

Might also be somewhat related to #1821.

@stale
Copy link

stale bot commented Jul 15, 2017

This issue has been automatically marked as stale becuase it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!

@rafgraph
Copy link
Author

@helfer this is still a valid issue.

@stale
Copy link

stale bot commented Aug 7, 2017

This issue has been automatically marked as stale becuase it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!

@stale stale bot closed this as completed Aug 22, 2017
@stale
Copy link

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!

@dardub
Copy link

dardub commented 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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 17, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

4 participants