• GraphQLの基礎の基礎

¶GraphQLの構成

GraphQLは大きく分けて「クエリ言語（フロント側 front、リクエスト, request）」と「スキーマ言語（サーバー側 server、レスポンス, response）」の２つによって構成されています。

クエリ言語とは？

GraphQLサーバーに対してリクエストをするための言語（合計3種類）

¶下準備@orgpi58g.yushei.net

プロジェクトを作った後に、npm経由でGraphQL.jsをインストールします。

• init package

$ fnm current
v20.10.0
$ node --version
v20.10.0
$ npm --version
10.2.3
$ yarn --version
1.22.21

$ mkdir GraphQLPrac && cd $_
$ touch server.js
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (graphqlprac) 
version: (1.0.0) 
description: graphQL Pratice
entry point: (server.js) 
test command: 
git repository: 
keywords: 
author: alexlai@munetaka,me
license: (ISC) 
About to write to /opt/xfs/build/GraphQLPrac/package.json:

{
  "name": "graphqlprac",
  "version": "1.0.0",
  "description": "graphQL Pratice",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "alexlai@munetaka,me",
  "license": "ISC"
}


Is this OK? (yes)

$ npm install express express-graphql graphql --save
npm WARN deprecated express-graphql@0.12.0: This package is no longer maintained. We recommend using `graphql-http` instead. Please consult the migration document https://github.com/graphql/graphql-http#migrating-express-grpahql.

added 68 packages, and audited 69 packages in 3s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

• server.js as

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// GraphQLスキーマ言語を記述してスキーマを構築する
// スキーマはあくまで定義のみで実際のデータ操作は行わない
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// ルートは、APIエンドポイントごとにリゾルバ関数を提供します
// リゾルバとは特定のフィールドのデータを返す関数（メソッド）であり、実際のデータ操作を行う部分
const root = {
  hello: () => {
    return 'Hello world!';
  },
};

// Expressでサーバーを立てます
// graphiql: true としたので、GraphQLを利用できる
const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at http://localhost:4000/graphql');