{
  hero {
    name
  }
}

{
  hero(id: "1000") {
    name
  }
}

{
  empireHero: hero(episode: EMPIRE) {
    name
  }
  jediHero: hero(episode: JEDI) {
    name
  }
}

{
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  appearsIn
  friends {
    name
  }
}

query HeroForEpisode($ep: Episode) {
  hero(episode: $ep) {
    name
    ... on Droid {
      primaryFunction
    }
    ... on Human {
      height
    }
  }
}

{
  "ep": "JEDI"
}

query HeroNameAndFriends {
  hero {
    name
    friends {
      name
    }
  }
}

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}

{
  "episode": "JEDI"
}

query Hero($episode: Episode, $withFriends: Boolean!) {
  hero(episode: $episode) {
    name
    friend @include(if: $withFriends) {
      name
    }
  }
}

{
  "episode": "JEDI"
  "withFriend": false
}

{
  search(text: "an") {
    __typename
    ... on Human {
      name
    }
    ... on Driod {
      name
    }
    ... on Starship {
      name
    }
  }
}

{
  "data": {
    "search": [
      {
        "__typename": "Human",
        "name": "Han Solo"
      },
      {
        "__typename": "Human",
        "name": "Leia Organa"
      },
      {
        "__typename": "Starship",
        "name": "TIE Advanced x1"
      }
    ]
  }
}

mutation CreateReviewForEpisode($ep: Episode, $review: TreviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

{
  "ep": "JEDI"
  "review": {
    "stars": 5,
    "commentary": "This is a great movie!"
  }
}

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

// スキーマを定義
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// クライアントから叩かれたら動く関数を定義
const root = {
  hello: () => {
    // 実際にはここでDBに接続してデータを取得して返す
    return 'Hello world!';
  },
};

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');

const query = `{
  hello
}`;

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({
    query,
  })
})
  .then(r => r.json())
  .then(data => console.log(data)); //-> "Hello world!"

scalar Date

enum Episode {
  NEWHOPE
  EMPIRE
  JEDI
}

type Character {
  friends: [String]
}

type Character {
  name: String!
}

type Character {
  friends: [String!]  # リストはnullの可能性はあるが、リストの中の値は確実に文字列 
  friends: [String]!  # リストは必ずnullではないが、中身はnullも入ってくる可能性がある
}

interface Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
}

type Human implements Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
  totalCredits: Int
}

type Droid implements Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
  primaryFunction: String
}

query HeroForEpisode($ep: "JEDI") {
  hero(episode: $ep) {
    name
    primaryFunction # Human にはこのフィールドはないです。というエラーになる
  }
}

query HeroForEpisode($ep: "JEDI") {
  hero(episode: $ep) {
    name
    ... on Driod {
      primaryFunction # Droid の時だけ取得するので Human の時は無視される
    }
  }
}

union SearchResult = Human | Droid | Starship

{
  search(test: "an") {
    __typename
   ... on Human {
     name
     height
   }
   ... on Droid {
     name
     primaryFunction
   }
   ... on Starship {
     name
     length
   }
  }
}

input ReviewInput {
  starts: Int!
  commentary: String
}

mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commenary
  }
}

{
  "ep": "JEDI",
  "review": {
    "stars": 5,
    "commentary": "This is a great movie!"
  }
}

type Query {
  human(id: ID!): Human
}

type Human {
  name: String
  appearsIn: [Episode]
  starships: [Starship]
}

enum Episode {
  NEWHOPE
  EMPIRE
  JEDI
}

type Starship {
  name: String
}

Query: {
  human(obj, args, context, info) {
    // human がクエリで要求された時に動く処理。DBとかから必要な情報を取得して返す
    return context.db.loadHumanByID(args.id).then(
      userData => new Human(userData)
    )
  }
}

overwrite: true # 生成時にファイルを上書きして良いか
schema: "./src/graphql/schema.graphql" # スキーマファイルへのパスを指定
documents: "./src/graphql/client/**/*.graphql" # フロント側で使うクエリのファイルを読み込む
generates:
  src/types/generated/serverGraphql.d.ts: # 型定義を作るためのパスとプラグインを指定
    plugins:
      - "typescript"
      - "typescript-resolvers"
  src/types/generated/clientGraphql.tsx: # React hooks を生成するためのパスとプラグインを指定
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

 "codegen": "graphql-codegen --config codegen.yml"

npm run codegen

myapp
│
├─ src/
│  │
│  ├─ graphql/ # GraphQL の関連ファイルはここにまとめる
│  │  │  
│  │  ├─ client/ # GraphQL のクライアント用のファイル置き場
│  │  │  ├─ mutation/
│  │  │  │  └─ saveUser.graphql # 1ファイル1ミューテーションで増やしていく
│  │  │  ├─ query/
│  │  │  │  └─ user.graphql # 1ファイル1クエリで増やしていく
│  │  │  └─ index.ts # new ApolloClient をする関数を書いておく。 src/pages/_app.ts で使う
│  │  │  
│  │  ├─ server/ # GraphQL のサーバー用のファイル置き場
│  │  │  ├─ resolvers/ # リゾルバをいい感じに生やす
│  │  │  │  └─ index.ts
│  │  │  └─ index.ts # new ApolloServer をする関数を書いておく。 src/pages/api
│  │  │  
│  │  └─ schema.graphql
│  │  
│  ├─ pages/
│  │  │  
│  │  ├─ api/
│  │  │  └─ graphql.ts # new ApolloServer を実行してAPIを生やす。`/api/graphql` のエンドポイントになる
│  │  │  
│  │  ├─ _app.tsx # ApolloProvider で全ページで使えるように設定
│  │  └─ index.tsx # 各ページでは自動生成された useQuery の hooks を使って GraphQL にリクエストを送信する
│  │  
│  └─ types/
│     ├─ clientGraphql.tsx # 自動生成されたクライアント側で使う hooks 
│     └─ serverGraphql.d.ts # 自動生成された型定義
│  
└─ codegen.yml # GraphQL Code Generator に必要な設定ファイル。これも `src/graphql` の中に入れてもよかったけど設定ファイルがルートにあると何を使ってるか分かりやすくて好きなのでよしとする

import { readFileSync } from 'fs';
import { resolve } from 'path';

import { ApolloServer } from '@apollo/server';
import { startServerAndCreateNextHandler } from '@as-integrations/next';

import { resolvers } from './resolvers';

export const initializeApolloServer = () => {
  const typeDefs = `#graphql
    ${readFileSync(resolve(process.cwd(), './src/graphql/schema.graphql')).toString()}
  `;

  const server = new ApolloServer({
    typeDefs,
    resolvers,
  });

  return startServerAndCreateNextHandler(server);
}