Im using Apollo Client, Graphcool and React. I have a valid login form, but I need the user interface to be updated when the user is logged in, and I need this to happen in different components.
This seems to be a solution for Apollo-link-state. My code below works, but Im getting this error:
Missing field CurrentUserIsLoggedIn in {} in writeToStore.js
Setting up my Apollo client:
import React from 'react'; import ReactDOM from 'react-dom'; // Apollo import { ApolloProvider } from 'react-apollo'; import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloLink, split } from 'apollo-link'; import { withClientState } from 'apollo-link-state'; import { WebSocketLink } from 'apollo-link-ws'; import { getMainDefinition } from 'apollo-utilities'; // Components import LoginTest from './components/App/LoginTest'; const wsLink = new WebSocketLink({ uri: `wss:`, options: { reconnect: true, }, }); // __SIMPLE_API_ENDPOINT__ looks like: 'https://api.graph.cool/simple/v1/__SERVICE_ID__' const httpLink = new HttpLink({ uri: 'https://api.graph.cool/simple/v1/XXX', }); // auth const middlewareAuthLink = new ApolloLink((operation, forward) => { const token = localStorage.getItem('auth-token'); const authorizationHeader = token ? `Bearer ${token}` : null; operation.setContext({ headers: { authorization: authorizationHeader, }, }); return forward(operation); }); const cache = new InMemoryCache(); const defaultState = { CurrentUserIsLoggedIn: { __typename: 'CurrentUserIsLoggedIn', value: false, }, }; const stateLink = withClientState({ cache, defaults: defaultState, resolvers: { Mutation: { CurrentUserIsLoggedIn: (_, args) => { const data = { CurrentUserIsLoggedIn: { __typename: 'CurrentUserIsLoggedIn', value: args.value, }, }; cache.writeData({ data }); }, }, }, }); const client = new ApolloClient({ cache, link: ApolloLink.from([ stateLink, middlewareAuthLink, split( // split based on operation type ({ query }) => { const { kind, operation } = getMainDefinition(query); return kind === 'OperationDefinition' && operation === 'subscription'; }, wsLink, httpLink, ), ]), }); ReactDOM.render( <ApolloProvider client={client}> <LoginTest /> </ApolloProvider>, document.getElementById('root'), );
LoginTest.js:
import React from 'react'; import { graphql, compose } from 'react-apollo'; import gql from 'graphql-tag'; import App from './App'; const LoginTest = props => { if (props.LoginServerQuery.loading) return <p>Loading...</p>; // If the server tells us the user is logged in if (props.LoginServerQuery.loggedInUser) { // Then set the local logged in state to true props.CurrentUserIsLoggedInMutation({ variables: { value: true, }, }); } return <App />; }; const CurrentUserIsLoggedInMutation = gql` mutation CurrentUserIsLoggedInMutation($value: Boolean) { CurrentUserIsLoggedIn(value: $value) @client { value } } `; const LoginServerQuery = gql` query LoginServerQuery { loggedInUser { id } } `; const LoginTestQuery = compose( graphql(LoginServerQuery, { name: 'LoginServerQuery' }), graphql(CurrentUserIsLoggedInMutation, { name: 'CurrentUserIsLoggedInMutation', }), )(LoginTest); export default LoginTestQuery;
