Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

queryFn with server action name not working on Next.js #7330

Open
tsuyuni opened this issue Apr 24, 2024 · 0 comments
Open

queryFn with server action name not working on Next.js #7330

tsuyuni opened this issue Apr 24, 2024 · 0 comments

Comments

@tsuyuni
Copy link

tsuyuni commented Apr 24, 2024

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

"use server"

const fetchTasks = async () => {
  try {
    const { data, errors } = client.graphql({ // I'm using AWS Amplify Graphql client
      query: listTasks,
      variables: {
        filter: {},
      },
    });
    if (errors) throw new Error(errors[0].message);
    return data.listTasks.items as Task[];
  } catch (err) {
    console.log(err);
    return [];
  }
};

export default fetchTasks;

hooks/useTasks.ts

"use client"

import fetchTasks from "../actions/fetchTasks";

const useTasks = () => {
  const { data } = useQuery({
    queryKey: ["tasks"],
    queryFn: fetchTasks, // using function name
  });
  return { data };
};

export default useTasks;

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"

import fetchTasks from "../actions/fetchTasks";

const useTasks = () => {
  const { data } = useQuery({
    queryKey: ["tasks"],
    queryFn: () => fetchTasks(), // using anonymous arrow function
  });
  return { data };
};

export default useTasks;

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 and npm 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant