突变后设置Apollo缓存/状态

Question

我使用Apollo 2.0管理graphQL API调用，并处理react应用程序的全局状态。

我试图创建一个登录屏幕，用户在其中输入用户名和密码，这将发送到我的API进行身份验证，成功后，我想将isLoggedIn的全局状态设置为true。

到目前为止，我能够使用一个使用客户声明的突变来设置全局状态，因此它只与局部状态有关。我有另一个变种，它进行graphQL API调用，验证用户名/密码，然后返回成功/错误响应。

一旦API调用变异完成或失败，我希望能够设置isLoggedIn。

我的客户端具有以下默认状态，并设置了如下解析程序：

const httpLink = new HttpLink({
  uri: '/graphql',
  credentials: 'same-origin'
});

const cache = new InMemoryCache();

const stateLink = withClientState({
  cache,
  resolvers: {
    Mutation: {
      updateLoggedInStatus: (_, { isLoggedIn }, { cache }) => {
        const data = {
          loggedInStatus: {
            __typename: 'LoggedInStatus',
            isLoggedIn
          },
        };
        cache.writeData({ data });
        return null;
      },
    },
  },
  defaults: {
    loggedInStatus: {
      __typename: 'LoggedInStatus',
      isLoggedIn: false,
    },
  },
});

const link = ApolloLink.from([stateLink, httpLink])

const client = new ApolloClient({
  link,
  cache
});

export default client

然后在我的登录组件中，我有以下突变和查询，我在撰写的帮助下将其作为HOC传递：

const UPDATE_LOGGED_IN_STATUS = gql`
  mutation updateLoggedInStatus($isLoggedIn: Boolean) {
    updateLoggedInStatus(isLoggedIn: $isLoggedIn) @client
  }`

const AUTHENTICATE = gql`
  mutation authenticate($username: String!, $password: String!) {
    auth(username: $username, password: $password) {
      username
      sales_channel
      full_name
      roles
    }
  }`

const GET_AUTH_STATUS = gql`
  query {
    loggedInStatus @client {
      isLoggedIn
    }
  }`

export default compose(
  graphql(GET_AUTH_STATUS, {
    props: ({ data: { loading, error, loggedInStatus } }) => {
      if (loading) {
        return { loading };
      }

      if (error) {
        return { error };
      }

      return {
        loading: false,
        loggedInStatus
      };
    },
  }),
  graphql(UPDATE_LOGGED_IN_STATUS, {
    props: ({ mutate }) => ({
      updateLoggedInStatus: isLoggedIn => mutate({ variables: { isLoggedIn } }),
    }),
  }),
  graphql(AUTHENTICATE, {
    props: ({ mutate }) => ({
      authenticate: (username, password) => mutate({ variables: { username, password } }),
    }),
  })
)(withRouter(Login));

如您所见，我有this.props.authenticate（用户名，密码），它在提交登录表单时使用。

然后我有了这个。道具。UpdateLogedinStatus（布尔值），我可以更新客户端缓存/状态。

如何组合这些，以便我可以调用验证（），如果成功，设置loggedInstatus，如果失败，设置hasErrored或errorMessage标志的排序？

提前感谢。

编辑：

我试图在我的变异回调中处理状态更新。

// Form submission handler
onSubmit = async ({ username, password }) => {
    this.setState({loading: true})
    this.props.authenticate(username, password)
      .then(res => {
        this.setState({loading: false})
        this.props.updateLoggedInStatus(true)
      })
      .catch(err => {
        this.setState({loading: false, errorMessage: err.message})
        console.log('err', err)
      })
  }

还有比这更好的方法吗？要等回电话，感觉很复杂。我本以为可以通过解析器将响应映射到缓存对象？

Answer 1

我认为您目前处理它的方式（调用身份验证，然后调用updateLoggedInstatus）就像使用apollo-link-state一样干净简单。但是，使用apollo-link-state可能首先是矫枉过正。从Apollo的缓存中派生登录状态可能会更简单。例如，您可以有这样的HOC：

import client from '../wherever/client'

const withLoggedInUser = (Component) => {
  const user = client.readFragment({
  id: 'loggedInUser', 
  fragment: gql`
    fragment loggedInUser on User { # or whatever your type is called
      username
      sales_channel
      full_name
      roles
      # be careful about what fields you list here -- even if the User
      # is in the cache, missing fields will result in an error being thrown
    }
  `
  })
  const isLoggedIn = !!user
  return (props) => <Component {...props} user={user} isLoggedIn={isLoggedIn}/>
}

请注意，我使用loggedInUser作为键。这意味着我们在配置InMemoryCache时还必须使用dataIdFromObject：

import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory'

const cache = new InMemoryCache({
  dataIdFromObject: object => {
    switch (object.__typename) {
      case 'User': return 'loggedInUser'
      // other types you don't want the default behavior for
      default: return defaultDataIdFromObject(object);
    }
  }
})