This library provides hooks and components to easily interact with opinionated graphql APIs. It includes patters do create paginated lists, admin interface data grids, and edit views.
npm install @tesseractcollective/react-graphqlThis library provides hooks and components to easily interact with opinionated graphql APIs. It includes patters do create paginated lists, admin interface data grids, and edit views.
Supported GraphQL APIs:
- Hasura
Other APIs on roadmap:
- TODO
Add these dependencies: react-router-dom graphql graphql-tag jotai lodash react react-dom react-native-web react-scripts urql type-fest @tesseractcollective\react-graphql
Update src/index.web.ts and/or src/index.native.ts to import and export the file and any types created for the new file.
If there is an index file inbetween src and your component you need to update that as well. This isn't necessary but improves local typescript support.
If the component can be built and maintained using only react-native-web components, put it in src/components/shared and do that!
Otherwise, put the component in component in src/components/native OR web and only update the matching index file in src.
setup the correct dependencies for platform:
``
pnpm webmode
Then run a pack command based on platform:
`
pnpm pack:web
* Find .tgz : Resolve any errors and look for the correct .tgz file in the root of the project.
* Copy path : Right click and select "copy path"
* Install via file: In the target project run pnpm add PASTE_PATH_TO_TGZ
This will override the existing version of react-graphl in that project with the one you built on disk.
Repeat as needed.
NOTE: You do not need to bump the version!
setup the correct dependencies:
`
pnpm nativemode
Then run a build command:
`
pnpm build:native:ts
Update package.json with the path to the native project you want to test in:
`
"test:copy": "cp -rf ./dist PATH/node_modules/@tesseractcollective/react-graphql/dist"
This will override the existing version of react-graphl in that project with the one you built on disk.
Repeat as needed.
NOTE: You do not need to bump the version!
To run story book:
* Make sure you have installed dependencies via pnpm i
* add file in the root of the project
* Place this content inside:
`
module.exports = {
STORYBOOK_HASURA_URL: 'https://DOMAIN.APP/v1/graphql',
STORYBOOK_HAUSRA_AUTH_KEYNAME: 'x-hasura-admin-secret OR x-collaborator-token OR other key',
STORYBOOK_HASURA_AUTH_VALUE: 'TOKEN_OR SECRET',
};
Then run:
pnpm storybook`