使用 react-apollo

我打算使用GraphQL的API来创建一个前端应用程序来获取数据。可使用的框架有React和Vue.js等。这次我将使用React.js（上次是用Vue）。

除了React.js，我们还将使用apollo-client（GraphQL客户端库），以及使用React更方便地使用apollo的react-apollo。

react-apollo

React-apollo的文档相对较丰富。

前提 tí)

假设某个GraphQL服务器上有一个用户的API。

type User {
  id: ID! @unique
  name: String!
}

首先，在已安装create-react-app的服务器上创建一个模板。

用以下命令创建一个模板。

create-react-app <app_name>

添加React-Apollo等库

yarn add apollo-boost react-apollo graphql-tag graphql

src/App.jsにGraphQLサーバへの接続を書く

注意：请修改GraphQL服务器地址。

import { ApolloProvider } from "react-apollo";
import gql from "graphql-tag";
import ApolloClient from 'apollo-boost';
import { Query } from "react-apollo";

const client = new ApolloClient({
  uri: "http://<GraphQLサーバアドレス>"
});

const Users = () => (
  <Query
    query={gql`
      {
        users {
          id
          name
        }
      }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      return data.users.map(({ id, name }) => (
        <div key={id}>
          <p>{`${id}: ${name}`}</p>
        </div>
      ));
    }}
  </Query>
);

最後にの間に先ほどのUserを挿入します。

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <ApolloProvider client={client}>
        <div>
          <h2>My first Apollo app</h2>
        </div>
        <Users/>
        </ApolloProvider>
      </div>
    );
  }
}

文件的结构如下所示。已更新★。

.
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── App.css
│   ├── App.js　★
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

开始

yarn start

使用以下方式，当您访问http://localhost:3000/时，React应用程序将启动。

请注意：在这里出现”tokyo”等数据之前，您需要预先准备好GraphQL服务器(prisma, graphql-yoga的情况下)。

附录。使用Skaffold实现Kubernetes自动部署。

接下来是娱乐节目。

skaffold.yamlを追加

apiVersion: skaffold/v1alpha2
kind: Config
build:
  artifacts:
  - imageName: react-apollo-sample
deploy:
  kubectl:
    manifests:
      - k8s/*

skaffoldがKubernetes上にコンテナを起動するための設定用k8sフォルダを作成。下記を追加。

kubernetes/ 载具.yaml

apiVersion: v1
kind: Pod
metadata:
  name: react-apollo-sample
  labels:
    app: react-apollo-sample
spec:
  containers:
  - name: react-apollo-sample
    image: react-apollo-sample
    ports:
    - containerPort: 3000

k8s/service.yaml 可以被翻译为「k8s/服务.yaml」。

kind: Service
apiVersion: v1
metadata:
  name: react-apollo-sample
spec:
  selector:
    app: react-apollo-sample
  ports:
  - protocol: TCP
    port: 80
    targetPort: 3000
    nodePort: 30080
  type: NodePort

開発用の環境をデプロイ（ファイル変更検知→自動再デプロイ）

skaffold dev

本番用の環境をデプロイ

skaffold run

好了好了，终于接下来是Apollo Server了。2.0版本也已经发布，拥有各种功能，包括batching等。
我们将深入探讨能够实现多个GraphQL服务器协同的Schema stitching。