NodeJS v20X
npm i --save @mui/material @emotion/react @emotion/styled @fontsource/roboto @mui/icons-materi al
https://andrebnassis.medium.com/setting-eslint-on-a-react-typescript-project-2021-1190a43ffba https://dev.to/quizzes4u/how-to-set-up-eslint-and-prettier-in-react-typescript-5-project-2023-hd6
npx eslint --init
npm i -g @nestjs/cli@latest
nest new chatter-backend
- Snackbar
- AppBar
- List
- Divider
- Grid
- Toolbar Api
- Typography
- Modal
- Switch with FormGroup
- Stack
- CSSBaseline
- Material Icons
- Container
- Box
- IconButton
- TextField and InputBase
- Paper
@graphql-codegen/cli
and@parcel/watcher
. Instructions
npm i -D @graphql-codegen/cli @parcel/watcher
npx run graphql-code-generator init
npm run codegen
- Using
concurrently
in package.json to start web server along with watching codegen together:
npm i -D concurrently
"scripts": {
"start": "concurrently \"react-scripts start\" \"npm run codegen --watch\"",
}
- useReactiveVar() hook and makeVar()
- Mutation will not trigger cache update on non-primitive response. We can either use
refetchQueries
orupdate
cache on successful mutation. Instructions
npm i react-infinite-scroller
to help scrolling for Chat componentnpm i -save-dev @types/react-infinite-scroller