Apollo 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(),
  });
}

tama8021

ssrしたいときのコードの参考にしたい記事たち

tama8021

model 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

tama8021

rails API graphQl導入

これを参考に

それ以外

tama8021

Rails Graphql参考記事

tama8021

rails JWT firebaseAuth関連

tama8021

認可系参考記事

色々やり方があるらしい、、

tama8021

Apollo Client/GraphQL Code Generator

めちゃくちゃ参考になった

tama8021

Code 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'

tama8021

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

参考

tama8021

適当なqueryかmutationを書いて

query users {
  getUsers {
    id
  }
}

generateコマンドを叩く

> yarn generate
yarn run v1.22.10
$ graphql-codegen --config codegen.yml

tama8021

Next.jsでのApolloClientのセットアップ