Update viewer fields and connection on Store

Question

I'm trying to update the values and connections on my current viewer within the Relay store.

So without calling the mutation signIn if I print:

console.log(viewer.name) // "Visitor"
console.log(viewer.is_anonymous) // true

on Mutations we got the method updater which gives us the store, so in my mutation I'm doing something like this:

mutation SignInMutation($input: SignInInput!){
  signIn(input: $input){
      user {
          id
          name
          email
          is_anonymous
          notifications{
              edges{
                  node {
                      id
                      ...NotificationItem_notification
                  }
              }
          }
      }
      token
  }
}

So my updater method has:

const viewer = store.get(viewer_id);
const signIn = store.getRootField('signIn');
viewer.copyFieldsFrom(signIn.getLinkedRecord('user'))

After this I updated the store I got the name email is_anonymous fields updated with the data that just came from the graphql endpoint (I mean now name is "Erick", is_anonymous is now false, which is great), but If I try to do viewer.notifications and render it, the length of the viewer.connections seem to be 0 even when it has notifications.

How can I update my current viewer and add the notifications from the MutationPayload into the store without the need to force fetch?

Im using the latest relay-modern and graphql.

PS: Sorry for the bad formation, but is just impossible to format the code the way OF wants me to, i formated it to 4 spaces and still gave me errors.

Samuel Samuel · Accepted Answer · 2018-08-15T04:17:59

With some reorganisation of your GraphQL schema it might be possible to remove the need to interact directly with the Relay store after your sign-in mutation. Consider:

viewer {
  id
  currentUser {
    name
    email
  }
}

When a user that is not logged in, currentUser would return null.

You could then modify your login mutation to be:

mutation SignInMutation($input: SignInInput!){
  signIn(input: $input){
      viewer {
        id
        currentUser {
          name
          email
          token
        }
      }
  }
}

Knowing the 'nullability' of the currentUser field provides an elegant way of determining if the user is logged in or not.

Based on the presence of the token field implies that you are using JWT or similar to track login status. You would need to store this token in local storage and attach it to the headers of the outgoing Relay requests to your GraphQL endpoint if it is present.

Storing the token itself would have to be done in the onCompleted callback of where you make the mutation request (you will have access to the payload returned by the server in the arguments of the callback function).

As an alternative to the token, you could also explore using cookies which would provide the same user experience but likely require less work to implement then JWT tokens.

Update viewer fields and connection on Store

1 Answers