graphql-setup

Sup mate

1. Press . to open this repo in GitHub Codespaces.

2. Take a look at ./graphql-codegen.yml and ./package.json

3. Then check out *.gql files and the generated code in *.generated.ts

   • I usually gitignore **/*.generated.*, but I wanted
   • I format (and usually also run linter fix) in "postcodegen" script,
     because those files may be written by the computer, yet they'll be read by
     a human.

4. The project isn't very impressive, but if you want to play with it, you can run it with:

   • pnpm install - installs dependencies
   • pnpm dev - runs Vite development server

5. If you click the flower icon in the app, you'll notice React Query DevTools.

   • Those DevTools and a sensible cache are one of the main reasons for this
     setup.

6. We're defining our own GraphQL client "fetcher" function for React Query hooks in /src/gqlClient.ts

   • All generated files will import this from ~/gqlClient. As those generated
     files land next to their queries thanks to
     @graphql-codegen/near-operation-file-preset we needed to configure a way
     for a convenient non-relative import.
     • Notice compilerOptions.paths in tsconfig.json and the usage of
       vite-tsconfig-paths in vite.config.ts