首次使用Rails的GraphQL（Apollo Client篇）

1 年 ago

文, 翔

2 minutes

这篇文章的内容 (Zhè de

我之前整理了一个初学者在Rails中学习并使用GraphQL的过程中所进行的调研。

只需要一种选项，以下是对于使用GraphQL获取数据的工作的翻译：

在使用GraphQL获取数据的工作中，

スキーマの書き方

尽管到这部分我已经写下了，关于“如何获取数据”的关键部分太长无法写下，因此在此处记录。

我参考的文章是这篇。

这些教程等等

由于上述文章详细介绍了实际的实施方法，所以这里主要会记录我在负责的实施中做出的创新点。

使用Apollo Client

GraphQL的准备

由于现有的文章和官方教程的内容非常优秀，所以详细内容将在那里介绍。在这里只简单介绍步骤。

gem 'graphiql-rails'

请安装这个 gem。

$ bundle install
$ rails g graphql:install

当执行该命令时，我认为routes.rb中会包含以下内容。

Rails.application.routes.draw do
  post "/graphql", to: "graphql#execute"
  # 後略
end

当使用POST方法访问/graphql的URL时，将执行GraphQL的方法。

请参阅上一篇文章来了解更详细的后续定义等内容。

阿波罗客户端的准备工作

安装apollo-client

yarn add @apollo/client

初始化appolo-client。

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

// 解説します（★１）
const client = new ApolloClient({
  uri: 'http://localhost:3000/graphql',
  cache: new InMemoryCache()
});

// 解説します（★2）
export const App = () => {
    return (
        <ApolloProvider client={client} >
            <Sample />
        </ApolloProvider>
    );
}

初始化apollo-client

首先，使用ApolloClient()方法来初始化apollo-client。
以下是两个必需选项。

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

uri…apollo-clientがGraphQLの情報を受け取るところ。uriかlinkのどちらかが必須で、両方あった場合はlinkが優先される。

cache…apollo-clientがクエリの実行結果をローカルに保存するために使用するもの。@apollo/clientに同梱されているInMemoryCacheがおすすめ。

这里有详细的选项。

在这个示例中，我们在App.jsx中进行了初始化，但也可以将初始化的内容写在其他文件中，并将其加载到App.jsx中。

将ApolloProvider放置在应用程序的顶部位置。

然后，将ApolloProvider组件放置在应用程序的尽可能上方。通过将之前初始化的ApolloClient实例传递给它，以便在较低层的组件中可以使用apollo-client。

export const App = () => {
    return (
        <ApolloProvider client={client} >
            <Sample />
        </ ApolloProvider>
    );
}

执行查询

在中国,你可以使用useQuery()方法来执行查询。在之前的App.jsx中调用，在Sample.jsx中像这样写。

import React from 'react';
import { useQuery, gql } from "@apollo/client";

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

export const Sample = () => {
    const {loading, error, data} = useQuery(GET_USERS); // 解説します

    if (loading) return 'ロード中....';
    if (error) return `Error ${error.message}`;

    return (
        <>
            {data.users.map(user => (
                <div key={user.id}>
                    <h1>{user.name}</h1>
                    <h2>{user.email}</h2>
                </div>
            )}
        </>
    )
};

useQuery方法默认返回一个具有loading、error和data三个属性的result对象。我们通过解构赋值将其分别赋值给{loading, error, data}。

loading…これがtrueである間、クエリはまだ実行中であり、結果はまだ返されていません。

error…クエリで1つ以上のエラーが発生した場合、このオブジェクトには、graphQLErrorsの配列または単一のnetworkErrorが含まれます。

result…GraphQLクエリの実行結果を含むオブジェクトです。

请查看useQuery的详细规格，请点击这里。

已经做完！

应该能够将用户信息绘制在屏幕上了。（由于现有应用与实际情况差异较大，可能会有遗漏，发现后将进行修正）

此外，

ID等を利用した単一オブジェクトのGET

mutationを利用したPOSTやUPDATEメソッドの実行