https://github.com/hasparus/graphql-setup
just sharing a GraphQL setup I like with a friend
https://github.com/hasparus/graphql-setup
Last synced: 5 months ago
JSON representation
just sharing a GraphQL setup I like with a friend
- Host: GitHub
- URL: https://github.com/hasparus/graphql-setup
- Owner: hasparus
- Created: 2022-04-02T17:53:49.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-02T17:55:38.000Z (about 4 years ago)
- Last Synced: 2024-10-19T05:17:02.809Z (over 1 year ago)
- Language: TypeScript
- Size: 60.5 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Sup mate 👋
1. Press . to open this repo in GitHub Codespaces.
1. Take a look at _./graphql-codegen.yml_ and _./package.json_
1. 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.
1. 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
1. 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.
1. 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_