Javascript 使用突变响应更新apollo客户端

我有一个登录组件，它在提交时调用一个登录变量并检索用户数据

当返回用户数据时，我想设置apollo客户端状态，但我对文档中如何设置感到困惑：

我的组件看起来是这样的：

const LOGIN = gql`
  mutation login($username: String!, $password: String!) {
    login(username: $username, password: $password) {
      username
      fullName
    }
  }
`

const Login = () => {
  const onSubmit = (data, login) => {
    login({ variables: data })
      .then(response => console.log("response", response))
      .catch(err => console.log("err", err))
  }

  return (
    <Mutation 
        mutation={LOGIN}
        update={(cache, { data: { login } }) => {

      }}
    >
      {(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>
  )
}

使用上下文API 如果您已使用

• 使用

  ---

  只是在那里引用它
  我不明白你想设置什么“状态”，你链接到的示例是用缓存数据更新客户端的缓存查询（由于你执行的

  变异

  ，现在可能无效）。您是否尝试在登录后为将来的阿波罗客户端查询设置某种身份验证上下文？@EdwardSammutalesi是的，我正在尝试设置用户数据，以便以后可以查询它。那么将其写入客户机状态是否正确？如果是，我如何实现这一点？@Stretch0没有要写入的客户端状态。您需要将该信息存储到其他地方。如果您想在请求中添加

  身份验证

  头之类的操作，请在发送请求之前查看使用以修改请求。@EdwardSammutalesi可能我有点困惑。我已经用我的客户机对象添加了一个edit，如您所见，我的默认值是

  agent

  等于null。当一个用户登录时，我想让代理设置。所以，我想更新缓存还是客户端？这看起来更像我想要实现的。将尝试此操作，并很快更新。谢谢

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

  const Login = () => {
      const onSubmit = async (data, login, client) => {
          const response = await login({ variables: data });
  
          if (response) {
              client.whatever = response;
          }
      };
  
      return (
          <ApolloConsumer>
              {client => (
                  <Mutation mutation={LOGIN}>
                      {login => <Form onSubmit={e => onSubmit(e, login, client)} />}
                  </Mutation>
              )}
          </ApolloConsumer>
      );
  };
  

  const Login = client => {
      const onSubmit = async (data, login) => {
          const response = await login({ variables: data });
  
          if (response) {
              client.whatever = response;
          }
      };
  
      return (
          <Mutation mutation={LOGIN}>
              {login => <Form onSubmit={e => onSubmit(e, login)} />}
          </Mutation>
      );
  };
  
  withApollo(Login);
  

  import { client } from "wherever-you-made-your-client";