首页 文章

更新apollo客户端的变异响应

提问于
浏览 次
0

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

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

正如你所看到的，我在我的变异中有更新prop，它接收 login param并拥有我想在apollo客户端状态中设置的用户数据 .

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

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

如何使用mutate的update属性中的变异响应来更新我的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
})
javascript reactjs graphql apollo react-apollo

1 回答

  • 2

    使用Context API

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

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

    没有Context API

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

    并在那里引用它

    回复于

相关问题