CODEWITHSUNDEEP
reactjsreact-reduxapolloapollo-clientredux-toolkit
עמית שוקרון
עמית שוקרון

Reputation: 165

Apollo client saving user data

I am new to apollo-client, I used to work with redux-toolkit to store user info (uesrname,email, etc..) && localStorage and then I could use that specific user info in every component.

I have no idea how to do it with the apollo-client.

  const [addUser, { loading }] = useMutation(USER_LOGIN, {
    update(_, { data: { loginUser } }) {
      console.log(loginUser);
    },
    variables: {
      username: values.username,
      password: values.password,
    },
    onError(error) {
      setError(error.message);
    },
  });

so here as you can see I fetched that data, now I want it to be saved through redux stroe and local storage to get this data from anywhere. I just don't know what is the correct way of doing this. Would be glad to get some hints!

Upvotes: 1

Views: 288

Answers (1)

nick
nick

Reputation: 1178

So there are a few methods to do what you described. You can see them outlined in the apollo docs here.

The easiest way to update your local data is to refetch the query. What will happen is after you execute a mutation, you can include a refetchQueries array in that mutation's options. This specifies which queries you want to refetch after the mutation occurs.

So to update your local state when you execute a mutation, it'd probably look like this:

  const [addUser, { loading }] = useMutation(USER_LOGIN, {
    refetchQueries: [
      {query: GET_POST}, // An object referencing query (a DocumentNode object parsed with the gql function) and variables
      'GetComments' // Query name (The name of a query you've previously executed)
     ],
    variables: {
      username: values.username,
      password: values.password,
    },
    onError(error) {
      setError(error.message);
    },
  });

However there are other methods in the docs, one of them is by updating the cache directly, you can find an example in the docs here.

Upvotes: 1

Related Questions