Open14
Next.js ✕ Graphql ✕ Railsの知見まとめ
tama8021Apollo ClientでSSR
- キャッシュ関係で上手くデータが取れなくて詰まったときに参考になった記事たち
- 公式サイトの参考箇所
- キャッシュをどうするかというフェッチポリシーというものがある
- デフォルトの値を変えちゃう
- キャッシュ大変そう
tama8021こんな感じでやったらできたけど、クエリの結果がキャッシュに保存されないらしいからapolloを使うありがたみが減るみたい
例
function createApolloClient() {
return new ApolloClient({
ssrMode: typeof window === 'undefined',
ssrForceFetchDelay: 100,
defaultOptions: {
watchQuery: {
fetchPolicy: 'no-cache',
},
query: {
fetchPolicy: 'no-cache',
},
},
cache: new InMemoryCache(),
});
}
- ssrしたいときのコードの参考にしたい記事たち
tama8021model migrationファイルの作成コマンド
$ bundle exec rails g model User
Running via Spring preloader in process 73716
invoke active_record
create db/migrate/20211002031333_create_users.rb
create app/models/user.rb
invoke rspec
create spec/models/user_spec.rb
invoke factory_bot
create spec/factories/users.rb
rails API graphQl導入
- これを参考に
- それ以外
tama8021Rails Graphql参考記事
tama8021Apollo Client/GraphQL Code Generator
- めちゃくちゃ参考になった
tama8021Code Generatorを日本語で解説されている
tama8021最終的な codegenファイル
codegen.yml
overwrite: true
schema: './schema.graphql'
documents: 'src/libs/graphql/**/*.graphql'
generates:
// graphqlを呼び出すファイル（命名はご自由に）
src/libs/graphql/graphql.ts:
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-apollo'
graphqlファイルの出力
- サーバーサイドでスキーマファイルの出力
$ rake graphql:schema:dump
フロントでもファイルがほしい
get-graphql-chemaプラグインを使う
// .graphqlファイル
$ get-graphql-schema http://localhost:3000/graphql > schema.graphql
// .jsonファイル
$ get-graphql-schema http://localhost:3000/graphql > schema.json -j
- 適当なqueryかmutationを書いて
query users {
getUsers {
id
}
}
- generateコマンドを叩く
> yarn generate
yarn run v1.22.10
$ graphql-codegen --config codegen.yml
Next.jsでのApolloClientのセットアップ