You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"use client"importfetchTasksfrom"../actions/fetchTasks";constuseTasks=()=>{const{ data }=useQuery({queryKey: ["tasks"],queryFn: fetchTasks,// using function name});return{ data };};exportdefaultuseTasks;
However, this didn't work. Data from useTasks hook always returned undefined.
When I put console.log at the top of inside fetchTasks function, this didn't show up, so I think using function name as queryFn is completely not working.
After some trials and errors, replacing function name with anonymous arrow function solved this problem.
hooks/useTasks.ts
"use client"importfetchTasksfrom"../actions/fetchTasks";constuseTasks=()=>{const{ data }=useQuery({queryKey: ["tasks"],queryFn: ()=>fetchTasks(),// using anonymous arrow function});return{ data };};exportdefaultuseTasks;
Then you will see: Tasks with function name has no tasks though expected to have 3 tasks. Tasks with anonymous arrow function has 3 tasks as it was expected.
Expected behavior
queryFn with function name should properly work.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
OS: Sonoma 14.2
Tanstack Query adapter
react-query
TanStack Query version
5.32.0
TypeScript version
5.4.5
Additional context
No response
The text was updated successfully, but these errors were encountered:
Describe the bug
I'm using useQuery hook with my Next.js 14.1.3 project. I'd like to use server action as query function, so I made my codes like this.
actions/fetchTasks.ts
hooks/useTasks.ts
However, this didn't work. Data from
useTasks
hook always returnedundefined
.When I put
console.log
at the top of insidefetchTasks
function, this didn't show up, so I think using function name as queryFn is completely not working.After some trials and errors, replacing function name with anonymous arrow function solved this problem.
hooks/useTasks.ts
Is this expected behavior? I know many of documentation codes are using function name as queryFn. (e.g. https://tanstack.com/query/latest/docs/framework/react/quick-start)
Your minimal, reproducible example
https://codesandbox.io/p/github/tsuyuni/ReproduceQueryFnWithFunctionNameNotWorking/main?import=true
Steps to reproduce
Just run
npm i
andnpm run dev
.Then you will see:
Tasks with function name has no tasks though expected to have 3 tasks.
Tasks with anonymous arrow function has 3 tasks as it was expected.
Expected behavior
queryFn with function name should properly work.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
OS: Sonoma 14.2
Tanstack Query adapter
react-query
TanStack Query version
5.32.0
TypeScript version
5.4.5
Additional context
No response
The text was updated successfully, but these errors were encountered: