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参数，并具有要在阿波罗客户端状态下设置的用户数据。

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

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

使用withApollo

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

并在那里引用

使用突变响应更新阿波罗客户端

1 个答案:

使用上下文API

没有上下文API