blitz-js / blitz-js/blitz

Can not use useMutation in BlitzPage

Open
#4,343 1 comment 0 reactions 0 assignees View on GitHub
kind/bug status/triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.