apollo-codegen

들어가기
useMutation 및 useQuery를 사용하기 위해
server에 있는 dto들을 front로 다 불러들이는 과정
매우 중요하므로 집중할것.

1. npm i -D @graphql-codegen/cli

2. root에 codegen.yml

1 .codegen.yml

overwrite: true
schema: http://localhost:4000/graphql
documents: './src/**/*.{tsx,ts}'
generates:
  ./src/graphql/__generated__.ts:
    plugins:
      - typescript
      - typescript-operations
     
  

2. package.json

   "scripts": {
   "tailwind:build": "npx tailwindcss-cli@latest build -i ./src/styles/tailwind.css -o ./src/styles/styles.css",
   "start": "npm run generate & react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject",
   "generate": "graphql-codegen"
 },

scripts에 "generate":"graphql-codegen"을 넣는데
npm run generate로 실행시켜도 되고
npm run start 에 같이 넣어도 된다.

gql문을 만들어 줄때마다 실행시켜주어야(build) 함.

실행시키고 나면, 1번에서 설정한 대로
./src/graphql/generated.ts
파일이 생김.

그러고 나면, useMutation, useQuery사용 가능해짐.
server의 dto 및 type들이 생겨남.

https://graphql-code-generator.com/docs/guides/react