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

Question

我有一个登录组件，当提交时，它会调用登录突变并检索用户数据。

当返回用户数据时，我想设置 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>
  )
}

如您所见，我的突变中有更新道具，它接收login参数并具有我想在阿波罗客户端状态中设置的用户数据。

这里的示例将响应写入缓存cache.writeQuery，但我不确定这是否是我想要做的。我是否不想像在此示例中更新本地数据那样写入客户端（而不是缓存）？

only的 update 属性mutation似乎接收缓存参数，所以我不确定是否有任何方法可以访问client而不是cache.

如何使用 mutate 的更新属性中的突变响应来更新我的 apollo 客户端状态？

编辑：我的客户：

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

标签： javascriptreactjsgraphqlapolloreact-apollo

Answer 1

使用上下文 API

如果您使用ApolloProvider将组件包装在层次结构中更高的位置

• 使用ApolloConsumer

  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);
  

没有上下文 API

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

并在那里引用它