常連

## テーマ、知りたいこと

REST、GraphQL、gRPCの違いと、それぞれの使い分けについて知りたいです。

## 背景、状況
Web開発初学者です。

現在、Webアプリ開発の設計を進める中で、APIの設計方式を検討しています。
調べていくと主な選択肢として「REST」「GraphQL」「gRPC」があるのは把握したあのですが、それぞれの違いや向いている場面がまだよくわかっていません。

主に以下の点について皆様お聞きしたく、質問いたしました。
- データ取得の効率や柔軟性の観点でどれがどう優れているのか（それぞれのメリット）
- どのような基準や目的で使い分けているのか
- 学習コストや運用のしやすさに違いはあるのか

基本的な質問かもしれず恐縮ですが、よろしくお願いいたします🙇



REST、GraphQL、gRPCの違いと使い分けについて

### 実現したいこと

あるユーザーがどのユーザーに対してLikeをしたのか、その情報を保持させるLikeモデルをGraphQLで実装しています。
mutationでCreateLikeFromというメソッドをつくり、`user_id: 1`が`user_id: 3`をLikeする実装をしたいです。
現在の下記のコードでは、クエリを投げてもエラーが出力されてしまいます。
- クエリ
```
mutation {
  createLikeFrom(
    input:{userId: 1, toUserId: 3}
  ){
    likes {
      id
      fromUser {
        id
      }
      toUser {
        id
      }
    }
  }
}
```
どのあたりに問題があるかご教授いただきたいです。

### エラー
赤波線で`Cannot query field "createLikeFrom" on type "Mutation".`と出力される
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-13/2c1a4138-c232-4fdc-b272-618b5a655927.png)


### 該当のソースコード

models/user.rb
```ruby
class User < ApplicationRecord
  has_many :likes_from, class_name: "Like", foreign_key: :from_user_id, dependent: :destroy
  has_many :likes_to, class_name: "Like", foreign_key: :to_user_id, dependent: :destroy
  has_many :active_likes, through: :likes_from, source: :to_user 
  has_many :passive_likes, through: :likes_to, source: :from_user
end
```
models/like.rb
```ruby
class Like < ApplicationRecord
  belongs_to :to_user, class_name: "User", foreign_key: :to_user_id
  belongs_to :from_user, class_name: "User", foreign_key: :from_user_id
end
```
graphql/types/user_type.rb
```ruby
module Types
  class UserType < Types::BaseObject
    field :id, ID, null: false
    field :created_at, GraphQL::Types::ISO8601DateTime, null: false
    field :updated_at, GraphQL::Types::ISO8601DateTime, null: false
    field :like, [Types::LikeType], null: false
      def like_from; object.likes_from; end
      def like_to; object.likes_to; end
  end
end
```
graphql/types/like_type.rb
```ruby
module Types
  class LikeType < Types::BaseObject
    field :id, ID, null: false
    field :from_user_id, Integer, null: false
    field :to_user_id, Integer, null: false
    field :created_at, GraphQL::Types::ISO8601DateTime, null: false
    field :updated_at, GraphQL::Types::ISO8601DateTime, null: false
    field :user, Types::UserType, null: false
    field :from_user, Types::UserType, null: false
    field :to_user, Types::UserType, null: false
  end
end
```
graphql/types/query_type.rb
```ruby
module Types
  class QueryType < Types::BaseObject
    field :like, Types::LikeType, null: false do
      description 'いいね情報(id指定で1件)'
      argument :id, ID, required: true
    end

    def like(id:)
      Like.find(id)
    end

    field :likes, [Types::LikeType], null: false do
      description 'いいね情報(全件)'
    end

    def likes
      Like.all
    end

  end
end
```
graphql/types/mutation_type.rb
```ruby
module Types
  class MutationType < Types::BaseObject
    field :createLikeFrom, mutation: Mutations::CreateLikeFrom
  end
end
```
graphql/mutations/create_like_from.rb
```ruby
module Mutations
  class CreateLikeFrom < BaseMutation
    graphql_name 'CreateLikeFrom'

    field :user, Types::UserType, null: false
    field :like, Types::LikeType, null: false

    argument :id, ID, required: true
    argument :user_id, ID, required: true
    argument :from_user_id, ID, required: true
    argument :to_user_id, ID, required: true
    argument :from_user, Integer, required: true
    argument :to_user, Integer, required: true

    def resolve(**args)
      user = User.find(args[:user_id])
      user.likes_from.create!(to_user_id: to_user_id)
      {
        like: like,
      }
    rescue => e
      GraphQL::ExecutionError.new(e.message)
    end
  end
end
```

GraphQLとrailsでユーザー同士のLike機能を実現したい

nodemon app でサーバーを起動しようとすると
このようなエラーが出ます
```
user@fukusyun-2 graphQL % nodemon app                                          
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node app index.js`
internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module '/Users/user/udemy/graphQL/index.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
[nodemon] app crashed - waiting for file changes before starting...
```

初めてnodemonコマンドを使ったので
わからないことが多く、
同じようなエラーを見たのですが
解決策がわかりませんでした、、


```
package.json

{
  "name": "graphql",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "mongoose": "^5.10.0",
    "nodemon": "^2.0.4"   インストール確認
  }
}
```

```
一様app.js

const express = require("express")
const graphql = require("express-graphql")
const mongoose = require("mongoose")
const app =express()

mongoose.connect('mongodb+srv://fukui:3578a@cluster0.uu61l.mongodb.net/<dbname>?retryWrites=true&w=majority')
mongoose.connection.once('open', () =>{
  console.log('db connected')
})

mongoose.use('/graphql', graphqlHTTPS)

app.use('/graphql',graphqlHTTP({
  
}))
app.listen(4000, () =>{
  console.log('listing part 4000')
})
```

npm fixができません
```
audited 604 packages in 2.12s
found 369 vulnerabilities (364 low, 2 moderate, 3 high)
  run `npm audit fix` to fix them, or `npm audit` for details
user@fukusyun-2 calender-app % npm audit fix 
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-08-25T05_33_23_586Z-debug.log
user@fukusyun-2 calender-app % 
```


scriptの方を
```
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "start": "nodemon Server.js"
 }
```
にしてみたりといろいろいじったのですがダメでした

killall -9 node
コマンド後、でも同じく


試したコマンド
rm package-lock.json && npm i && npm audit fix
npm --prefix ./server install ./server  
npm i minimatch -D
npm install npm-check-updates  
npx ncu -u 
npm update
 npm outdated     
npm audit fix
 yarn add nodemon
yarn add graphql

app crashedエラー

# やろうとしていること
- Gatsby×MicroCMSでLP制作
- GraphQLでデータを取得して動的に静的ページを生成
- Netlifyで自動ビルド＆デプロイ

# 問題
CMS側で任意入力としているフィールドが空の時、ビルドで失敗する

例）CMSで以下のようなフィールドがあります
- メイン画像(mainImage)
- タイトル（title）
- サブ画像(subImage)

サブ画像が未入力の時、以下のコードだとGatsbyのビルドが失敗します。
```
export const query = graphql`{
  microcmsHoge {
    title
    mainImage {
      url
    }
    subImage { //ここでビルド失敗
      url
    }
  }
}`
```
`Cannot query field "subImage" on type "microcmsHoge"`

# 分からないこと
データが存在しないフィールドから情報取得しようとするとコケるということだと思うのですが、
CMS運用のユースケースとして、フィールドを空（未入力）にすることを許容したいことは多々あるかと思います。

そのような場合、フロントの実装はどのようにすれば良いのでしょうか？
GraphQLを使うのが初めてのため、初歩的な質問でしたらすみません。よろしくお願いします。

Gatsby×CMSで、GraphQLで情報を取得しようとするとCannot query fieldエラーになる

## やろうとしていること
現在、GraphQL(express-graphql)を使って認証APIを作っています。基本的には下記のリンク記事に従い作成し、問題なく動作はしております。
[https://www.aizulab.com/blog/graphql-compose/](https://www.aizulab.com/blog/graphql-compose/)

構成は下記の通りです。
Node.js
Express
MongoDB
Mongoose
GraphQL

## わからないこと
下記に箇条書きしていきます。
※スキーマは下の方に載せてあります。
### query
クエリ(read)はわかりやすく、特にわからない点はないです。

```
query getUser {   　　　　　　　//⇦クエリ名をつける
  userById(_id:"12345") {　　　//⇦欲しいIDを指定。userByIdはスキーマで定義した自作品。
    _id　　　　　　　　　　　　　　//⇦以下、欲しいデータ。
    password
    username
  }
}
```
### mutation 
ここからがわからないところです。
#### cteate
わからない点。(下記のコードはcreateはできています。)
**1.CreateOneUserInput!がどこからでてきたのか。ソースコードにはこのような記述はないです。このテキストを変えるとエラーで動きません。express-graphql独自に生成されるものでしょうか。**

**2.userCreateの引数(record: $input)。なぜこのような書き方になるのか。**

**3.$inputの意味。恐らく、query variablesで渡すものかと思いますが…**


```
mutation createUser($input: CreateOneUserInput!) {
  userCreate(record: $input) {
    recordId
  }
}

//query variables
{
  "input": {
    "username": "yamada",
    "password": "password"
  }
}
```
#### update
わからない点
graphiqlで右側に出てくるドキュメント(下画像)がヒントになっていそうなのですが、見様見真似で書いてはみましたが、全く更新する気配がないです。
一通り、ドキュメントを探しているのですが、queryの書き方ばかりでupdateの書き方が全然出てきません。
![イメージ説明](5a0b7082785502d502a723a6bd39ada9.png)
```
mutation updateUser($input: UpdateByIdUserInput!) {
  userUpdateById(_id:$input) {
    recordId
  }
}
```
かなり手詰まりです…
参考になる記事等ご紹介いただけると幸いです。何卒、宜しくお願い致します。
スキーマ
```
import { schemaComposer } from "graphql-compose";
import UserModel from "../models/user.js";
import { composeWithMongoose } from "graphql-compose-mongoose";
const customizationOptions = {};
const User = composeWithMongoose(UserModel, customizationOptions);
schemaComposer.Query.addFields({
  userById: User.getResolver("findById"), // IDでの1件取得
  userByIds: User.getResolver("findByIds"), // 複数IDでの検索
  userOne: User.getResolver("findOne"), // データ1件取得
  userMany: User.getResolver("findMany"), // データ複数件取得
  userCount: User.getResolver("count"), // データ件数取得
  userConnection: User.getResolver("connection"), // ?
  userPagination: User.getResolver("pagination"), // データのページ送り
});
schemaComposer.Mutation.addFields({
  userCreate: User.getResolver("createOne"), // データ作成1件
  userCreateMany: User.getResolver("createMany"), // データ作成複数件
  userUpdateById: User.getResolver("updateById"), // IDでのデータ更新
  userUpdateOne: User.getResolver("updateOne"), // データ更新1件
  userUpdateMany: User.getResolver("updateMany"), // データ更新複数件
  userRemoveById: User.getResolver("removeById"), // IDでのデータ削除
  userRemoveOne: User.getResolver("removeOne"), // データ削除1件
  userRemoveMany: User.getResolver("removeMany"), // データ削除複数件
});
export default schemaComposer.buildSchema();

```

【Graphql】mutation (特にupdate)の書き方がわからない。

### 実現したいこと

docker環境下で作成したWordpressをヘッドレスCMSとして使用し、静的ファイルをビルドしたい。

### 前提

以下のサイトを参考に、Next.js + TypeScript + docker + Wordpress + GraphQL でwebサイトを作成しております。
https://zenn.dev/masahiro_dev/articles/migrate-wordpress-to-nextjs

その中で、お知らせ一覧から詳細ページにリンクするDynamic Routesの設定が原因で、ビルドした時にエラーが発生します。
↓以下補足
・dockerを起動した開発環境だと、問題なく詳細ページは表示されます。
・詳細ページ（/post/[slug]）をファイルに含まなければ、ビルドできます。

### 発生している問題・エラーメッセージ

↓ビルドした時に以下のエラーが表示されます。
Collecting page data  .TypeError: fetch failed
〜略〜
Build error occurred
Error: Failed to collect page data for /post/[slug]

### 該当のソースコード

お知らせ詳細ページの記述です。GraphQLを使用して取得しております。

```ここに言語を入力
export async function generateStaticParams() {
	const res = await fetch(`${process.env.WP_API_URL}?_=${new Date().getTime()}`, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
		},
		body: JSON.stringify({
			query: `
        {
          posts {
            nodes {
              slug
            }
          }
        }
      `,
		}),
	});

	const { data } = await res.json();

	if (!data || !data.posts) {
		console.error("No posts found");
		return [];
	}

	const postSlugs = data.posts.nodes.map((post: { slug: string }) => ({
		slug: post.slug,
	}));

	return postSlugs;
}

export default async function PostPage({
	params,
}: {
	params: { slug: string };
}) {
	const res = await fetch(`${process.env.WP_API_URL}`, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
		},
		body: JSON.stringify({
			query: `
        query GetPostBySlug($slug: String!) {
          postBy(slug: $slug) {
            title
            content
            date
          }
        }
      `,
			variables: {
				slug: params.slug,
			},
		}),
		next: { revalidate: 10 },
	});

	const { data } = await res.json();

	if (!data || !data.postBy) {
		return (
				<div>
					<p>お知らせはありません。</p>
				</div>
		);
	}

	const post = data.postBy;

	return (
					<div>
						<h>{post.title}</h1>
						<p><time>{post.date}</time></p>
						<article className="article" dangerouslySetInnerHTML={{ __html: post.content }} />
					</div>
	);
}

```


Next.js + dockerのwebサイトでWordpressを取得した時にビルドできない

### 実現したいこと

- [ ] `Next.js`と`graphql`、`urql`を使用したシンプルコードを`vercel`にデプロイしてエラーなく動かしたい
- [ ] `urql`の`suspense`を用いて ロード中の描画を行いたい

### 前提
Next.jsのapp routerを用いて上記実現したいことができるかどうかを試しています。
いろいろとエラーが出ながら修正して進めていましたがよくわからない現象にぶつかりました。

componentの中でuseQuery（urql）を用いてfetchを行なってデータを表示したいのですが、なぜかデータを取得する際に以下のようなエラーが表示されます。
```
Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.
```
これ以上の内容がないので分からないのですが、私の認識では最初からclient renderingをしているつもりだったのでどうしてこのタイミングでエラーが発生して `Switched to client rendering`されるのかが全く分かっていません。
どこか設定がおかしくてサーバーとクライアントの切り分けができていないのでしょうか？
それとも根本的なところで認識がおかしかったりするのでしょうか？

上記のエラーにはどう対応したら良いのでしょうか？
考え方などでも構いませんので教えていただけると非常に助かります。

### 該当のソースコード
少し多くなるかもですが、ご容赦ください

```app/layout.tsx
import {
  UrqlProvider,
  cacheExchange,
  createClient,
  debugExchange,
  fetchExchange,
  ssrExchange,
} from "@urql/next";
import { devtoolsExchange } from "@urql/devtools";
import { refocusExchange } from "@urql/exchange-refocus";
import { retryExchange } from "@urql/exchange-retry";

const isServerSide = typeof window === "undefined";
const ssr = ssrExchange({
  isClient: !isServerSide,
});

const client = createClient({
  url: "http://localhost:3000/api/graphql",
  exchanges: [
    devtoolsExchange,
    refocusExchange(),
    cacheExchange,
    retryExchange({}),
    debugExchange,
    fetchExchange,
    ssr,
  ],
  requestPolicy: "cache-first",
  fetchOptions: () => {
    return {
      headers: { authorization: "Bearer token" },
      credentials: "include",
    };
  },
  suspense: true,
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <UrqlProvider client={client} ssr={ssr}>
          {children}
        </Providers>
      </body>
    </html>
  );
}
```

```app/page.tsx
import Component from "./components/Main";

export default async function page() {
  return <Component />;
}
```

```app/components/Component.tsx
const Component: React.FC<Props> = ({ query }) => {
  return (
    <>
      <Suspense fallback={<>ロード中</>}>
        <FetchData />
      </Suspense>
    </>
  );
};

// ここから下はfetchするコンポーネント
const dataQuery = `
  query ALL_BOOKS {
    books {
      title
      page
    }
  }
`
const FetchData: React.FC = () => {
  const [{ data }] = useQuery({
    query: dataQuery,
    variables: {},
    context: {
      suspense: true,
    },
  });
  return (
    <>
      {data.books.map((book) => (
        <div key={book.title}>{book.title}</div>
      ))}
    </>
  );
};
```
```pages/api/graphql.ts
import { readFileSync } from "fs";
import { join } from "path";
import { startServerAndCreateNextHandler } from "@as-integrations/next";
import { ApolloServer } from "@apollo/server";

const typeDefs = readFileSync(
  join(process.cwd(), "apollo/documents/schema.gql"),
  "utf-8"
);

const resolvers = {
  Query: {
    books: () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          return resolve([
            { title: "タイトル1", page: 100 },
            { title: "タイトル2", page: 200 },
            { title: "タイトル30", page: 300 },
          ]);
        }, 1000);
      });
    },
  },
};
const apolloServer = new ApolloServer<Resolvers>({ typeDefs, resolvers });
export default startServerAndCreateNextHandler(apolloServer);
```


### 補足情報（FW/ツールのバージョンなど）

- graphqlは `pages/api/graphql.ts`に`apollo-server`を用いて実装しています。
- 特にサーバーの実装はしていないのでmockとして定数を返しています。

その他必要な情報があればコメント追記しますのでコメントいただければと思います。
何卒、よろしくお願いします。


Next.js x graphql x urql を使ってクライアントサイドでデータ取得＆表示

リレーション関係にある複数のテーブルの情報をバックエンドから取得したいとき、
さらには複数ネストしたリレーション関係の情報を取得したい時、考えられる設計は、

**①取得したい全てのテーブル情報を返すエンドポイントを１つ作る**

**②それぞれのリソースを取得する複数のエンドポイントにリクエスト送って欲しい情報を全て取得する。**

RESTだと②のような設計になると思うのですが
フロントの非同期処理が複雑になるのと、そもそもHTTPリクエストが複数回送られるのは
サーバ側の負荷が増え、かつ速度が落ちるはずなのでユーザビリティ的にも良くないと考えます。

かといって①の方法だと仕様変更がおきたとき、複数のエンドポイントのソースの修正が必要になりうると思います。

自分はRESTを使わないWebAPIの開発しかしたことがないのでよくわからないのですが
RESTの思想で設計してる案件では、フロント側はPromisやasync/awaitを駆使して複数のAPIエンドポイントにfetchするような設計なのでしょうか？
やはりHTTPリクエストは1度で済ませるのが望ましいように思うのですが
このような設計は普通なのでしょうか？

なお、GrahpQL使えばこれらは解決するものでしょうか？