How to load Meteor.userId() to Apollo + React?

jamesmad · January 19, 2018, 6:18pm

I need my React application to know if a user is logged in, and if they are logged in then what their ID is.

I’m using Apollo. Can I have this state in Apollo’s store?

The alternative is to have it in my top level React component’s state and pass it down via props to the child components, but this is a lot of wiring. Ive heard that Apollo replaces the need for Redux etc so I’m assuming there is a way to handle this?

jamesmad · January 19, 2018, 9:27pm

If I wasn’t using Apollo I could do this with react-meteor-data, but I’m not sure if its a good idea to mix the two together.

a.com · January 20, 2018, 12:18pm

Some resources:

github.com

apollographql/meteor-starter-kit/blob/master/imports/ui/App.js#L43


 currentUser: PropTypes.object,
 hasErrors: PropTypes.bool,
 refetch: PropTypes.func,
 userLoading: PropTypes.bool,
};


/*
* We use `gql` from graphql-tag to parse GraphQL query strings into the standard GraphQL AST
* See for more information: https://github.com/apollographql/graphql-tag
*/
const GET_USER_DATA = gql`
 query getCurrentUser {
   user {
     emails {
       address
       verified
     }
     randomString
     _id
   }
 }

jamesmad · January 20, 2018, 2:24pm

Thanks for this. Ive actually been working through those youtube videos but I come unstuck when I try and do things not covered by Scott.

I got very excited by that starter kit until I realised its using Apollo v1 not v2. Vulcan JS is the same.

a.com · January 20, 2018, 2:26pm

@jamesmad v1 and v2 are very similar for the most part. If you look at the client-side configuration in that repo and compare it to the migration guide in apollo docs you can see almost line for line the differences.

yellowspaceboots · February 8, 2018, 3:13pm

@jamesmad In Scott’s tutorial series he does show you how to create an authLink for Apollo v2 to add the Meteor userId to Apollo’s context object. What are you needing the userID for? If you want to use to it to query mongo from your resolvers you can access it by using context.userId in any of your resolvers after you set up the authLink.

Also, is Meteor your client side as well? I only ask because I am having trouble solving the issue of getting the userId into my React Native app running apollo client without using something like react-native-meteor. If Meteor is your client side you can still run Meteor.userId() anywhere and get the current logged in user id. You could use this to somehow set the userId in Apollo’s client side cache inside say a login and logout mutations. Maybe somehow utilizing fragments?

jamesmad · February 8, 2018, 4:56pm

Im showing different elements if users are logged in or not so I need this to update reactively. I wanted Apollo to handle this but it seems to be much easier to user the Meteor.userId() function directly in my React components so thats what Im doing for now.