Can not use useMutation in BlitzPage
- Dominant language
- TypeScript
- Stars
- 14.1k
- Forks
- 803
- PR merge metrics
- No merged PRs in 30d
Description
### What is the problem?
I am using version 2.0.9 with AppRouter and auth. I tried to install from scratch 2 times and every time I get the same result.
I create src/pages/record/[userId].tsx where I call useMutation as following. It is expected that it just works. Instead, I am getting errors Error: No QueryClient set, use QueryClientProvider to set one
```
export const RecordingPage: BlitzPage = ({user}) => {
const barkMutation = useMutation(registerBarkForUser);
return
}
```
this results in
### Paste all your error logs here:
```
Error: No QueryClient set, use QueryClientProvider to set one
```
### Paste all relevant code snippets here:
```
export const RecordingPage: BlitzPage = ({user}) => {
const barkMutation = useMutation(registerBarkForUser);
return
}
```
### What are detailed steps to reproduce this?
1. Create fresh project with 2.0.9
2. Add page under src/pages/record/[userId].tsx
3. Add useMutation there
### Run `blitz -v` and paste the output here:
```
blitz -v
Blitz version: 2.0.9 (global)
Blitz version: 2.0.9 (local)
macOS Sonoma | darwin-arm64 | Node: v18.17.1
Package manager: npm
System:
OS: macOS 14.4.1
CPU: (8) arm64 Apple M1
Memory: 744.64 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
npmPackages:
@blitzjs/auth: ^2.0.9 => 2.0.9
@blitzjs/next: 2.0.9 => 2.0.9
@blitzjs/rpc: 2.0.9 => 2.0.9
@prisma/client: 5.4.2 => 5.4.2
blitz: 2.0.9 => 2.0.9
next: 14.1.4 => 14.1.4
prisma: 5.4.2 => 5.4.2
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: ^4.8.4 => 4.9.5
```
### Please include below any other applicable logs and screenshots that show your problem:
_No response_
Contributor guide
Research direction
Reproduce the issue in a fresh Blitz 2.0.9 project with App Router and auth, then add useMutation to src/pages/record/[userId].tsx as shown. Start by tracing the page's query context and verify that the page can call useMutation without the “No QueryClient set” error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100