201212 TIL ApolloClient&ApolloExpress

Apollo
Apollo Client
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
Apollo ClientはGraphQLベースのライブラリであり、クライアント・アプリケーションがGraphQLとデータ交換を行うのを支援します.useQuery、useMutationなどのhookを使用してクエリー要求データを送信します.
インストールnpm install @apollo/client graphqlまたはyarn add @apollo/client graphqlを入力してgraphqlおよびapollo clientをインストールします.
クライアントの作成
ApolloClientインスタンスを初期化し、GraphqlサーバのURLアドレスを定義します.

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

const client = new ApolloClient({
  uri: 'GRAPHQL_RUNNING_SERVER_ADDRESS',
  cache: new InMemoryCache()
});

応答/応答-ApolloクライアントをNative Appに接続@apollo/clientからApolloProvider構成部品をインポートし、最上位にラップします.

import React from 'react';
import { render } from 'react-dom';

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

function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <h2>My first Apollo app 🚀</h2>
      </div>
    </ApolloProvider>
  );
}

render(<App />, document.getElementById('root'));

ApolloProviderを最上位に配置することで、構成部品の任意の位置に触れることができます.
宣言されたclientをclient propsに接続します.
Apollo Clientがアプリケーション側設定の領域である場合、Apollo Expressはサーバ側設定の領域である.
Apollo Express
This is the Express and Connect integration of GraphQL Server. Apollo Server is a community-maintained open-source GraphQL server that works with all Node.js HTTP server frameworks: Express, Connect, Hapi, Koa and Restify. Read the docs. Read the CHANGELOG.
GraphQlサーバで使用できるexpress.
インストールnpm install apollo-server-expressまたはyarn add apollo-server-expressに設定します.
Express

import express from 'express';
import bodyParser from 'body-parser';
import { graphqlExpress } from 'apollo-server-express';

const myGraphQLSchema = // ... define or import your schema here!
const PORT = 3000;

const app = express();

// bodyParser is needed just for POST.
app.use<('/graphql', bodyParser.json(), graphqlExpress({ schema: myGraphQLSchema }));

app.listen(PORT);

Expressをインポートし、Graphql Schemaに接続して使用します.
Graphqlの1つの特徴は、1つの端点しか使用しないことです.
したがって、一般的な状況とは異なりapp.1つのuseからすべてのものを整理することができます.