常連

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

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

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

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

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

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

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

WebAPIの設計について。APIは１つの画面内で複数リクエストするのは普通ですか？

### 実現したいこと

あるユーザーがどのユーザーに対して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機能を実現したい

### 実現したいこと

- [ ] `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 を使ってクライアントサイドでデータ取得＆表示

## やろうとしていること
現在、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)の書き方がわからない。

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エラー

### 実現したいこと
GraphQL(Rails)で開発中のサービスにて、Mutationのresolveメソッドが呼ばれない事象が起きています。
上記事象を解消して、Mutationの実行ができるようにしたいです。
どなたかご存知の方、同様の事象にハマっている方がいらっしゃたら教えていただきたいです。

やったことなども見ていただきたいのですが、私の予想ではGraphQL、もしくはRails側に問題があるのではないかと考えております。

### 前提
現在Nextjs + GraphQL(Rails)で開発中のサービスにて、Mutationのresolveメソッドが呼ばれない事象が起きています。

### 発生している問題・エラーメッセージ
サービスの1機能として、ファイルアップロード機能をMutationで実現しようとしています。
通常の値更新のMutationについては問題なくresolveメソッドが呼び出されるのに対し、
ファイルアップロードが含まれるMutationについてはMutationのクラスが呼び出されていますがresolveメソッドが呼び出されていないです。

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

```ruby
#
# ファイルアップロード機能を含んだMutation
#
module Mutations
  class UpdateUser < BaseMutation
    argument :name, String, required: false
    argument :image, Types::Scalars::File, required: false

    field :user, Types::UserType, null: true
    field :errors, String, null: true

    puts "+++++++++++++++++++"
    puts "+++++++++++++++++++"
    puts "+++++++++++++++++++"
    puts "hogehoge"
    puts "+++++++++++++++++++"
    puts "+++++++++++++++++++"

    def resolve(attributes)
      # current_user = context[:current_user]
      current_user = User.find(1)

      puts "--------------------"
      puts "--------------------"
      puts "--------------------"
      puts "--------------------"
      
      current_user.name = 'test'
      current_user.save!
    end
  end
end
```

```zsh
#
# 上記ソースコードを実行したときのリクエスト
# クラス内「hogehoge」は呼ばれています。
# しかし、resolveメソッド内の「---------------」は出力されていない かつ
# SQLのUPDATE文が発行されていないことから呼び出されていないと判断
#

Started POST "/graphql" for 192.168.96.1 at 2023-05-01 22:52:55 +0900
Processing by GraphqlController#execute as */*
  Parameters: {"operations"=>"{\"operationName\":\"UpdateUser\",\"variables\":{\"name\":\"テスト太郎\",\"image\":null},\"query\":\"mutation UpdateUser($name: String, $image: File) {\\n  updateUser(input: {name: $name, image: $image}) {\\n    user {\\n      id\\n      name\\n      nickname\\n      __typename\\n    }\\n    __typename\\n  }\\n}\"}", "map"=>"{\"1\":[\"variables.image\"]}", "1"=>#<ActionDispatch::Http::UploadedFile:0x00007f08170e6778 @tempfile=#<Tempfile:/tmp/RackMultipart20230501-111-w6zs3a.jpg>, @original_filename="calendar.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"1\"; filename=\"calendar.jpg\"\r\nContent-Type: image/jpeg\r\n">, "operationName"=>"UpdateUser", "variables"=>{"name"=>"テスト太郎", "image"=>#<ActionDispatch::Http::UploadedFile:0x00007f08170e6778 @tempfile=#<Tempfile:/tmp/RackMultipart20230501-111-w6zs3a.jpg>, @original_filename="calendar.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"1\"; filename=\"calendar.jpg\"\r\nContent-Type: image/jpeg\r\n">}, "query"=>"mutation UpdateUser($name: String, $image: File) {\n  updateUser(input: {name: $name, image: $image}) {\n    user {\n      id\n      name\n      nickname\n      __typename\n    }\n    __typename\n  }\n}"}
  User Load (5.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`uid` = 'xxxxxxxxxxxxx' LIMIT 1
  ↳ app/lib/jwt.rb:38:in `get_user_info'
+++++++++++++++++++
+++++++++++++++++++
+++++++++++++++++++
hogehoge
+++++++++++++++++++
+++++++++++++++++++
Completed 200 OK in 5478ms (Views: 0.3ms | ActiveRecord: 36.1ms | Allocations: 19767)
```

```request
#
# 別プロジェクトで同様のクエリでファイルが送られることは確認済み
#
mutation UpdateUser($name: String, $files: [File!]) {
  updateUser(input: {name: $name, files: $files}) {
    errors
  }
}
```

```response
#
# エラーなどなくnullが返る
#
{
    "data": {
        "updateUser": null
    }
}
```

```debug(graphql_controller.rb)
#
# GraqhQLのクエリが実行される段階で渡される引数についてデバッグした結果
#

##########
#　コード
##########

result = RailsAppSchema.execute(query, variables: variables, context: context, operation_name: operation_name)
debugger
render json: result.to_json

##################
# 各変数のデバッグ結果
#
# executeに渡されている変数（query, variables, context, operation_name）について調査
#
##################

#
# 実行クエリ
#
(rdbg) query
"mutation UpdateUser($name: String, $image: File) {\n  updateUser(input: {name: $name, image: $image}) {\n    user {\n      id\n      name\n      nickname\n      __typename\n    }\n    __typename\n  }\n}"

#
# 変数
#
(rdbg) variables
{"name"=>"テスト太郎",
 "image"=>  #<ActionDispatch::Http::UploadedFile:0x00007f0814096a28   @content_type="image/jpeg",   @headers="Content-Disposition: form-data; name=\"1\"; filename=\"calendar.jpg\"\r\nContent-Type: image/jpeg\r\n",   @original_filename="calendar.jpg",   @tempfile=#<File:/tmp/RackMultipart20230501-111-cvuxz9.jpg>>}

#
# Context
#
(rdbg) context
{:current_user=> nil,
 :request=>#<ActionDispatch::Request POST "https://xxxxxxxxx/graphql" for 192.168.96.1>,
 :user_agent=>"Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Mobile Safari/537.36",
 :remote_ip=>"192.168.96.1"}

#
# operation_name
#
(ruby) operation_name
"UpdateUser"
```

### 試したこと
1. gem `apollo_upload_server` を利用する前は[こちら](https://zenn.dev/akizarashi/articles/e7550febb778aa)を参考に自前でファイルアップロード機能を実装し、本事象が発生。
2. gem `graphql` のバージョンを別プロジェクトで正常に動いているバージョン(`2.0.14`)に変更し試すも改善せず。
3. 1. で解消しなかったため、gem 'apollo_upload_server' を導入するも改善せず。
4. Nextjsからではなく、クライアントツール(Firecamp)からクエリ実行するも同事象が発生。
### 補足情報（FW/ツールのバージョンなど）
- Rails 7.0.4.2
- GraphQL 2.0.14
- apollo_upload_server(2.1)

【Rails】GraphQL APIのMutaionにてresolveメソッドが呼ばれない事象について

GolangとGraphQLの勉強をしています。
下記のサイトを参考にしながらGoの環境を構築していたのですが```gqlgen init```のコマンドを実行したら
```ここに言語を入力
bash: gqlgen: command not found
```
とターミナルにメッセージが表示されました。
解決方法わかる人いましたらご教授お願いしたいです。

[参考にしたサイト](https://qiita.com/Y_uuu/items/54c2749eca5b67ae9583?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items)


実行したコマンド
```
$ mkdir with-apollo-api
$ cd with-apollo-api
$ go mod init github.com/yuuu/with-apollo-api
$ go get github.com/99designs/gqlgen
$ go get github.com/rs/cors

# gqlgenでgraph/schema.graphqlsを生成
$ gqlgen init
```

golang gqlgen command not found が発生する

# やろうとしていること
- 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を使うのが初めてのため、初歩的な質問でしたらすみません。よろしくお願いします。