Starter template for a web application where the backend is developed with Hasura and the frontend with React.
Begin by launching the Hasura+Go or Hasura+Node.js backend application.
yarn dev
This demo app uses URQL and GraphQL Code Generator.
After creating a new query or muation with graphql() you will need to re-run codegen with:
yarn codegen
Note, edited codegen.ts from urql docs to include .ts and .tsx files.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list
Created with
npm create vite@latest hasura-base-react -- --template react-ts
Why was https://primereact.org/ selected
- lots of components (free)
- flexible icons
- Figma Support (not free, but that's ok)
- Decent appearance
- Tailwind (soon?) : tried this but vite wouldn't load it : https://primereact.org/tailwind/
Note primereact 10, broke buttons, so adding this to all to fix bg color : style={{backgroundColor: 'var(--primary-color)'}}
TODO : Run as an app with https://capacitorjs.com/solution/react