使用React Native开发GraphQL的ApolloClient的引入步骤

首先

今年我們主要使用GraphQL進行開發。
如果要在前端使用GraphQL，推薦使用ApolloClient。
這次我們將介紹在ReactNative中如何使用ApolloClient。
由於資訊有點舊，因此一開始導入花了些時間，希望對大家有所參考。

请参阅这篇文章。

阿波罗公式与React Native集成

※这个版本已经过时，直接使用会出现错误w

以下两个选项将使事情变得更容易。
有查询类型和函数类型，但推荐使用查询类型。

引入程序

1. 安装ApolloClient

这次的客户端将使用 apollo-boost 而不是 apollo-client。
react-apollo 将被用作提供者。

yarn add apollo-boost
yarn add react-apollo

2. 安装 GraphQL

由於使用GraphQL，我們需要安裝graphql-tag套件，以便在GraphQL內定義標籤。

yarn add graphql
yarn add graphql-tag

将ApolloClient集成到ReactNative中。

使用apollo-boost生成Client，并将其传递给ApolloProvider进行导航。
※与Redux相似的感觉。

如果您想要在这种情况下进行用户认证，您需要在ApolloClient的属性中进行定义。

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";

const client = new ApolloClient({
  uri: "http://127.0.0.1/graphql"
});

const Navigation = () => (
  <ApolloProvider client={client}>
    <Provider store={store}>
      <AppNavigation />
    </Provider>
  </ApolloProvider>
);

4. 如何使用查询功能

以下是Query的使用方法。
由于gql通常非常长且被多个项目共用，因此最好的方式是创建一个名为”gql”的分离目录，并按需加载。

import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

const DogPhoto = ({ breed }) => (
  <Query query={GET_DOG_PHOTO} variables={{ breed }}>
    {({ loading, error, data }) => {
      if (loading) return null;
      if (error) return `Error!: ${error}`;

      return (
        <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      );
    }}
  </Query>
);

5. Mutation的使用方式

如果以Query的形式，Mutation的使用方法非常简单。
你可以按以下形式进行。

import gql from "graphql-tag";
import { Mutation } from "react-apollo";

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

const AddTodo = () => {
  let input;

  return (
    <Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};