NestJS x Apollo ClientでGraphQL Serverを建ててNext.jsで使えるようにする

npm install graphql
npm install @graphql-codegen/cli

npm run graphql-codegen init
npm run install # install the choose plugins

➜  web git:(main) ✗ npx graphql-codegen init                        

    Welcome to GraphQL Code Generator!
    Answer few questions and we will setup everything for you.
  
? What type of application are you building? Application built with React
? Where is your schema?: (path or url) ../api/src/schema.gql
? Where are your operations and fragments?: src/**/*.graphql
? Pick plugins: TypeScript (required by other typescript plugins), TypeScript Operations (operations and fragments), TypeScript React Apollo (typed components and HOCs)
? Where to write the output: src/generated/graphql.tsx
? Do you want to generate an introspection file? Yes
? How to name the config file? codegen.yaml
? What script in package.json should run the codegen? generate

npm install @graphql-codegen/typescript-react-query
npm install @graphql-codegen/typescript
npm install @graphql-codegen/typescript-operations

npm install @graphql-codegen/typescript-urql

overwrite: true
schema: "../api/src/schema.gql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-urql" # ここを書き換える
  ./graphql.schema.json:
    plugins:
      - "introspection"

➜  web git:(main) ✗ npm run generate                            

> nextjs-sample-app@0.1.0 generate
> graphql-codegen

  ✔ Parse configuration
  ✔ Generate outputs

npm install --save urql graphql

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider value={urqlClient}>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </Provider>
  )
}
export default MyApp

const HealthCheck: NextPage = () => {
  const [result] = useHealthCheckQuery()

  if (!result.data) {
    return <Text>Error Occurred</Text>
  }

  const message = result.data.healthCheck.message

  return (
    <>
      <Text>{message}</Text>
    </>
  )
}

export default HealthCheck