Apollo能够快速搭建GraphQL服务器和GraphQL客户端应用

2 年 ago
清, 扬
2 minutes

首先

最近一直对 Apollo 感到困惑，所以我开始从头开始调查了一下。我想要写一篇介绍 Apollo 的入门文章。

因此，本文的目标读者如下所示。

    • Apollo って聞いたことはあるけど、何ができるのかよくわからない

 

    • 気にはなってたけど、日本語の情報が少なくて調べる気になれない

 

    バックエンドのツールなのかフロントエンドのツールなのか、話はそれからだ

本文的內容

    • Apollo の簡単な概要

 

    • Apollo を使って GraphQL サーバーを建ててみる

 

    Apollo を使って GraphQL サーバーを利用する React アプリを作ってみる

阿波罗的简要概述

公式页面在这里。
我认为以下的图片完全诠释了我的思想。

Apollo アーキテクチャ

所有的东西都变成A（pollo）。

通过使用 Apollo，所有数据都会被集成为 GraphQL 服务器。
这样一来，后端复杂性将被 Apollo 隐藏，客户端和后端只需关注与 Apollo 服务器的连接。
例如，如果想从 REST 服务器迁移到 GraphQL 服务器，则可以先通过 Apollo 实现使用 GraphQL 服务器，并逐步进行迁移。

一方面，预计GraphQL服务器作为整合的目标会变得复杂且庞大。针对这个问题，似乎可以通过Apollo Federation这个GraphQL服务整合功能来缓解。如果您只希望了解大致情况，建议阅读这篇文章。

在Apollo上能做的事情

    • GraphQL サーバーが簡単に構築できる

 

    • 各種バックエンドサービスを統合し、1 つの GraphQL エンドポイントに集約できる(本記事では触れない)

 

    • 集約されたデータをグラフ化することができる(本記事では触れない)

 

    GraphQL を利用する JavaScript クライアントアプリが簡単に作成できる

尝试使用Apollo Server。

在中国使用中国语言重述以下内容，仅需一个选项：
那么，让我们使用Apollo Server来创建一个GraphQL服务器。
我们将参考官方的入门指南进行操作。
※2020/03/19附注。以下

$ mkdir server
$ cd server
$ yarn init
$ yarn add apollo-server graphql
$ touch index.js

const { ApolloServer, gql } = require("apollo-server");

// スキーマを定義する
const typeDefs = gql`
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

// クエリで取得するデータを定数で置いておく
const books = [
  {
    title: "Harry Potter and the Chamber of Secrets",
    author: "J.K. Rowling"
  },
  {
    title: "Jurassic Park",
    author: "Michael Crishton"
  }
];

// booksクエリ発行時の処理を指定する
const resolvers = {
  Query: {
    books: () => books
  }
};

// サーバーを起動する
const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`? Server ready at ${url}`);
});

我们尝试在节点上启动。默认情况下使用4000端口，所以URL应该是http://localhost:4000/。如果能够在该URL上提交查询或直接在浏览器中访问，那就可以了。

这是一个完全按照教程的代码，但您不认为这是一段非常棒的代码吗？从上面提取出重要的部分来看，只有一小部分。

const { ApolloServer, gql } = require("apollo-server");

const typeDefs = gql`{スキーマ定義}`;

const resolvers = {
  Query: {
    // クエリに応じた関数の登録
  }
};

// サーバーを起動
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  // 起動時処理
});

只需这么一点，GraphQL 服务器就会起来。
而且，无论你注册的查询函数返回的是常量，还是在后台使用 REST，或者连接数据库，都没有关系。这是开发者的自由。
虽然库和框架原本就是这样的东西，但是只有我一个人觉得它足够聪明而美丽吗？

试试使用 Apollo Client

鉴于GraphQL的API服务器已经准备好了，接下来我们将创建客户端应用程序。Angular、Vue、Svelte等现代化JavaScript库似乎都已经准备好了，但是这次我们将使用React。
同往常一样，我们将参考官方的入门指南，但是内容会有一些变化。

$ mkdir client
$ cd client
$ yarn create react-app .
$ yarn add apollo-boost @apollo/react-hooks graphql

将src/App.js文件中的所有内容删除，并按照以下方式重新编写。

import React, { useMemo } from "react";
import ApolloClient, { gql } from "apollo-boost";
import { ApolloProvider, useQuery } from "@apollo/react-hooks";

const App = () => {
  // Apollo Clientを初期化する
  const client = useMemo(
    () => new ApolloClient({ uri: "http://localhost:4000" }),
    []
  );

  return (
    <div className="App">
      <ApolloProvider client={client}>
        <div>
          <h2>
            My first Apollo app{" "}
            <span role="img" aria-label="Rocket">
              ?
            </span>
          </h2>
          <Books />
        </div>
      </ApolloProvider>
    </div>
  );
};

const Books = () => {
  // 発行クエリを定義する
  const booksQuery = useMemo(
    () => gql`
      {
        books {
          title
          author
        }
      }
    `,
    []
  );

  // クエリを発行する
  const { loading, error, data } = useQuery(booksQuery);

  // 結果を表示する
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.books.map(({ title, author }, index) => (
    <div key={title}>
      <h3>book{index + 1}</h3>
      <p>title:{title}</p>
      <p>author:{author}</p>
    </div>
  ));
};

export default App;

虽然有点离题，但是ApolloProvider似乎使用了上下文。useQuery似乎是一个调用useContext的自定义钩子函数。这样一来，我们可以在组件的任何地方发出查询。

让我们来执行一下。在之前提到的 Apollo Server 已经启动的情况下，启动 Apollo Client。应该会显示如下画面。

ApolloClient.JPG

看起来您已成功从之前创建的Apollo Server中获取数据。GraphQL客户端应用程序也很快就创建好了。

最后

在这种情况下，我了解到可以使用Apollo快速创建应用程序。
结合Prisma和GraphQL代码生成器，可以享受舒适的GraphQL开发生活。
此外，本次代码采用了monorepo形式和TypeScript概略写的版本可以在此处找到。

Apollo似乎主要关注于数据图表，这一点可以从Docs页面顶部特意加粗显示看出来。
虽然这次仅仅创建了服务器和客户端，但是我还想在适当的时候再尝试一下。

祝您新年快乐！

可以参考的资料

阿波罗
阿波罗文档首页
阿波罗联邦的推荐- GraphQL和微服务-
使用GraphQL进行基于模式的表单验证
2019年TypeScript + Node.js项目的入门方式
研究了单一代码库
研究了yarn工作区

✖
广告
将在 10 秒后关闭
bannerAds