zustand-immer-react-query-course - GitLite

KO | EN

gitlite — search

#python #ai #typescript #go #golang #android #machine-learning #deep-learning #docker #nodejs #pytorch #security #ios #openai

zustand-immer-react-query-course

(★ 85)

State management using Zustand, immer, and Tanstack Query

File Explorer

Download Latest Version (.zip)

- pre-commit
- extensions.json
- launch.json
- db.json
- - Dedupe.tsx
  - FormSubmission.tsx
  - NavigationBar.tsx
  - Spinner.tsx
  - TitleBar.tsx
  - toaster.tsx
  - ToastExample.tsx
  - UpdateUiLabel.tsx
- - HeroesPage.test.ts
  - HomePage.test.ts
  - VillainsPage.test.ts
- - keyNames.ts
- - compute.ts
- - use-toast.ts
- - api-config.ts
  - generic-api-calls.ts
- - server.ts
- - antiHeroesPage.tsx
  - heroesPage.tsx
  - index.tsx
  - sign-in.tsx
  - sign-up.tsx
  - tablePage.tsx
  - villainsPage.tsx
- - __root.tsx
  - anti-heroes.lazy.tsx
  - heroes.tsx
  - index.tsx
  - sign-in.lazy.tsx
  - sign-up.lazy.tsx
  - table.tsx
- - immer.explanation.txt
  - themeStore.ts
- - create-query-provider-wrapper.tsx
- - routePaths.ts
  - style.ts
- - character.ts
- App.tsx
- index.css
- main.tsx
- routeTree.gen.ts
- setupTests.ts
- vite-env.d.ts
.env
.gitignore
.lintstagedrc.json
.npmrc
.oxlintrc.json
.prettierignore
.prettierrc
.zshrc
components.json
index.html
LICENSE
package.json
playwright.config.ts
postcss.config.cjs
prettier.config.js
README.md
screenshot.png
SHADCN_SETUP.md
tailwind.config.js
tsconfig.json
tsconfig.node.json
tsconfig.tsbuildinfo
vite.config.mts
WRITING_TESTS.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Tanstack Query Course with Zustand, Immer, and React Table
### There are two versions of this application. One using React Router and one using Tanstack Router
- Tanstack Router: `main` branch
- React Router: `using-react-router` branch

#### Tech tools

- https://bun.sh
- https://vitejs.dev
- https://react-hook-form.com
- https://zod.dev
- https://tanstack.com/router/latest
- https://tailwindcss.com
- https://zustand-demo.pmnd.rs
- https://tanstack.com
- https://vitest.dev
- https://playwright.dev

```sh
$ git clone https://github.com/webmasterdevlin/zustand-immer-react-query-course.git
```

```sh
$ cd zustand-immer-react-query-course
```

```sh
$ bun install
```

```sh
$ bun run start
```

#### E2e testing

```sh
$ npx playwright install
```

```sh
$ bun run test:e2e
```

The React app, and the fake web service will run concurrently.

![screenshot](https://raw.githubusercontent.com/devlinduldulao/zustand-immer-react-query-course/main/screenshot.png)

## Vitest

## Tanstack Router

- routeTree.gen.ts is an auto generated route tree

## Set up MSW for mocking API calls

- bun i -D msw
- the msw is a mocking library which will intercept the requests and responses in the integration tests
- create ./src/mocks/handler/todoHandler.ts
- create ./src/mocks/handler/index.ts
- create ./src/mocks/server.ts
- update the ./src/setupTests.ts

## Integration tests

- write integration tests for the fetch todos function of WorkTodosPage.tsx by creating ./src/pages/tests/WorkTodosPage.test.ts
- run the tests, pnpm run test, and see if the todos are rendered

#### TanStack Query persist cache between tests

- the beforeEach does not work

```ts
beforeEach(() => {
  queryClient.clear();
});
```