blitz-js / blitz

⚡️ The Missing Fullstack Toolkit for Next.js

Home Page:https://Blitzjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can not use useMutation in BlitzPage

PixelsCommander opened this issue · comments

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<RecordingPageProps> = ({user}) => {
    const barkMutation = useMutation(registerBarkForUser);
    return <RecordingPageComponent user={user} registerBarkForUserMutation={barkMutation}/>
}

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<RecordingPageProps> = ({user}) => {
    const barkMutation = useMutation(registerBarkForUser);
    return <RecordingPageComponent user={user} registerBarkForUserMutation={barkMutation}/>
}

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

@PixelsCommander

  1. Create fresh project with 2.0.9
  2. Add page under src/pages/record/[userId].tsx
  3. Add useMutation there

you are using both app and pages directory, is the _app.tsx file wrapped with the withBlitz wrapper?