登录后如何设置客户端状态?

时间:2018-07-12 12:49:23

标签: javascript reactjs graphql apollo react-apollo

我有一个apolloClient对象,我想存储用户数据(也称为agent)。我有一个登录React组件,它调用login突变,然后返回用户/代理对象。如何将用户/代理回复写给我的阿波罗客户?

我的阿波罗客户由我的客户状态和一个缓存组成(我目前不使用解析器,但可以在需要时使用):

const cache = new InMemoryCache()
const client = new ApolloClient({
  uri: "http://localhost:4000/graphql",
  clientState: {
    defaults: {
      locale: "en-GB",
      agent: null
    },
    typeDefs: `
      enum Locale {
        en-GB
        fr-FR
        nl-NL
      }

      type Query {
        locale: Locale
      }
    `
  },
  cache
})

我有我的登录组件,可以成功调用我的变异并获得预期的用户/代理对象响应:

const Login = ({client}) => {

  const onSubmit = (data, login) => {
    login({ variables: data })
      .then((response) => {
        console.log('response', response.data.login)
        // Or do I update the client here?
      })
      .catch(err => console.log("err", err))
  }

  return (
    <Mutation 
        mutation={LOGIN}
        update={(cache, data) => {
            // Do I update the cache here?
        }}
    >
      {(login, data) => {

        return (
          <Fragment>
            {data.loading ? (
              <Spinner />
            ) : (
              <Form buttonLabel="Submit" fields={loginForm} onChange={() => {}} onSubmit={e => onSubmit(e, login)} />
            )}

            {data.error ? <div>Incorrect username or password</div> : null}
          </Fragment>
        )
      }}
    </Mutation>
  )
}

export default withApollo(Login)

如您所见,我有两个选择。在login()承诺解决后,要么在突变更新属性中更新缓存,要么更新客户端。

我的客户状态具有默认的prop代理,该代理设置为null。我该使用哪种方法将其更新为用户/代理对象?

0 个答案:

没有答案