Open2023/06/25にコメント追加4

GraphQL触ってみる！

GraphQL

ニッシー☆

GraphQLといえばApollo Serverなので以下の記事を読んで初期化！

ニッシー☆

初期化はできた！（その時のコード↓）

index.ts

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

// A schema is a collection of type definitions (hence "typeDefs")
// that together define the "shape" of queries that are executed against
// your data.
const typeDefs = `#graphql
  # Comments in GraphQL strings (such as this one) start with the hash (#) symbol.

  # This "Book" type defines the queryable fields for every book in our data source.
  type Book {
    title: String
    author: String
  }

  # The "Query" type is special: it lists all of the available queries that
  # clients can execute, along with the return type for each. In this
  # case, the "books" query returns an array of zero or more Books (defined above).
  type Query {
    books: [Book]
  }
`;

const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

// Resolvers define how to fetch the types defined in your schema.
// This resolver retrieves books from the "books" array above.
const resolvers = {
  Query: {
    books: () => books,
  },
};

// The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

// Passing an ApolloServer instance to the `startStandaloneServer` function:
//  1. creates an Express app
//  2. installs your ApolloServer instance as middleware
//  3. prepares your app to handle incoming requests
const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`🚀  Server ready at: ${url}`);

ニッシー☆

ChatGPTにコメントを日本語訳してもらった

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

// スキーマはクエリの定義（"typeDefs"）の集合です
// これにより、データソースに対して実行されるクエリの「形状」が定義されます。
const typeDefs = `#graphql
  # GraphQL文字列内のコメント（このようなもの）はハッシュ（#）記号で始まります。

  # この「Book」タイプは、データソース内の各書籍のクエリ可能なフィールドを定義します。
  type Book {
    title: String
    author: String
  }

  # "Query"タイプは特別であり、
  # クライアントが実行できるすべての利用可能なクエリと
  # 各クエリの戻り値の型をリストします。
  # この場合、"books"クエリは0個以上のBook（上記で定義）の配列を返します。
  type Query {
    books: [Book]
  }
`;

const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

// リゾルバはスキーマで定義された型の取得方法を定義します。
// このリゾルバは、上記の "books" 配列から書籍を取得します。
const resolvers = {
  Query: {
    books: () => books,
  },
};

// ApolloServerコンストラクタは2つのパラメータを必要とします：
// スキーマの定義とリゾルバのセットです。
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

// `startStandaloneServer` 関数に ApolloServer のインスタンスを渡すことで：
//  1. Expressアプリケーションが作成されます
//  2. ApolloServerのインスタンスがミドルウェアとしてインストールされます
//  3. アプリケーションが着信リクエストを処理できるように準備されます
const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`🚀  Server ready at: ${url}`);

ニッシー☆

わかりやすい