GraphQL - 不使用钩子的 Apollo 客户端？答案

【问题标题】：GraphQL - Apollo Client without using hooks?GraphQL - 不使用钩子的 Apollo 客户端？
【发布时间】：2019-12-31 03:42:37
【问题描述】：

我正在尝试将 Apollo GraphQL 客户端用于 React Native。但是，在我的应用程序的某些部分，我需要对 GraphQL 数据进行突变，这样界面就不会暴露给用户。

例如，在我的注册页面上，我想在数据库中创建一个用户，但只有在我完成并验证了所有内容之后，创建了一个 uuid 等（需要类的东西）。如果通话成功，我想立即转到应用程序的主页。如果没有，我想通知用户。

因此，我需要访问执行 GraphQL 请求，无需挂钩，只需使用回调来更改 UI。这可能吗？如何做到这一点？

【问题讨论】：

标签： react-native aws-lambda graphql apollo-client

【解决方案1】：

是的，有可能。

对 GraphQL 服务的调用只需要在正文中包含 query 或 mutation 的键值对以及您尝试发送的查询/突变。

您可以通过一个简单的fetch 请求作为POST 或cURL 或通过邮递员来完成此操作...只要它是一个POST 请求并不重要。

See also here.

【讨论】：

这也适用于订阅吗？

【解决方案2】：

文档没有很好地解释它，但您可以简单地在 ApolloClient 对象上调用 query 或 mutate。 https://www.apollographql.com/docs/react/api/core/ApolloClient/#apolloclient-functions

与其他答案相比，这可能比仅使用 fetch 进行原始调用要好，因为它使用与应用程序其余部分相同的缓存层，而不是绕过它。

【讨论】：

【解决方案3】：

const apolloClient = new ApolloClient({
    uri: "/graphql",
    cache: new InMemoryCache()
})

const qr = gql`
    query {
       getCustomers() {
           name
       }
    }
`
const result = await apolloClient.query({
    query: qr ,
    variables: {}
})

【讨论】：

欢迎来到 Stack Overflow，感谢您提供答案。您能否编辑您的答案以包括对您的代码的解释？这将有助于未来的读者更好地理解正在发生的事情，尤其是那些不熟悉该语言并努力理解这些概念的社区成员。当社区已经验证了已接受的答案时，这一点尤其重要。在什么条件下你的方法可能更受欢迎？您是否在利用新功能？

【解决方案4】：

是的，事实上我有可能留下可用于查询和变异的示例类。

首先，配置您的应用程序以使用 graphQl。使用提供程序包装您的应用。

import { client } from './config/connection';
import { ApolloProvider } from '@apollo/client';

<ApolloProvider client={client}>
  <App/>
</ApolloProvider>

这是我们想要的客户

import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client';

export const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: 'http://localhost:4000/graphql',
});

Operations.js（包含查询和突变 gql）

import { gql } from '@apollo/client';

export const Query_SignIn = gql`
  query Login($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      name
    }
  }
`;

export const Mutate_SignUp = gql`
  mutation SignUp($name: String!, $email: String!, $password: String!, $passwordConfirmation: String!) {
    signUp(name: $name, email: $email, password: $password, passwordConfirmation: $passwordConfirmation) {
      name
    }
  }
`;

使用查询而不是 useQuery 挂钩的类

import { Query_SignIn } from '../../../operations';
class login {
  constructor(client) {
    this._client = client;
  }

  async signIn(email, password) {
    const response = await this._client.query({
      query: Query_SignIn,
      variables: {
        email,
        password,
      },
    });

    return response;
  }
}

export default login;

使用 mutate 而不是 useMutation 的类

import { Mutate_SignUp } from '../../../operations';
class register {
  constructor(client) {
    this._client = client;
  }

  async signUp(accountType, name, email, password, passwordConfirmation) {
    const response = await this._client.mutate({
      mutation: Mutate_SignUp,
      variables: {
        name,
        email,
        password,
        passwordConfirmation,
      },
    });

    return response;
  }
}

export default register;

【讨论】：