Next.js Discord

Discord Forum

React Query and server action : Fetching data doesn't get new data

Unanswered
American Crocodile posted this in #help-forum
Open in Discord
American CrocodileOP
I just used @tanstack/react-query for the first time. I want the client to regularly check if there is fresh data relative to the page. I'm usin greact query for that but the fetch doesn't trig the server action (linked in the queryfn). I even added a "refresh" button calling the "refetch()" of my query client, but never trig the server action. I'll give you my code, trying to give you only the related code. (btw I'm using nextjs 14, prisma, react query)
When i add a value, the revalidatePath() in the server action refresh the data. But if I look at the page in a second private window, the data is never refreshed. Even when pushing the refresh button.
Do you have any ideas of where I messed up ?

5 Replies

American CrocodileOP
Page.tsx
export default async  function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  };
}) {

  const clients: ClientSmall[] = await fetchClientsSmallDb();

  const queryClient = new QueryClient()
  await queryClient.prefetchQuery({
    queryKey: ["keywords"],
    queryFn: fetchKeywords,
  })

  return (
    <main>
      <NewKeyword clients={clients} />
      <Separator my={8} borderColor={'background.500'} />
      <h2 className="text-2xl font-bold mb-6">Keywords</h2>     
      <Suspense fallback={<div>Loading...</div>}>
      <HydrationBoundary state={dehydrate(queryClient)}>
          <KeywordSection/>  
      </HydrationBoundary>
      </Suspense>
    </main> 
  );
}
keywordSection.tsx
'use client'

export default  function KeywordSection({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  };
}) {

  const { data, error, refetch} = useQuery({
    queryKey: ["keywords"],
    queryFn: fetchKeywords,
  })

  if (error)  <h1>Error: {error.message} </h1>

  let keywords: KeywordWithClients[] = []
  if (!data) return <Spinner />

  keywords = data 

  const filteredKeywords = keywords.filter((keyword: KeywordWithClients) => {
    if (searchParams?.query) {
      const query = searchParams.query.toLowerCase();
      const regex = keyword.regex ? keyword.regex.toLowerCase() : "-no Author-";

      return regex.includes(query);
    }
    return true;
  });

  return (
    <>
           <KeywordsTable keywords={filteredKeywords} /> 
           <button onClick={() => refetch()}>Refresh</button>
    </>
    );
};


keywordData.tsx
'use server'

import db from "@/app/modules/db";
import { KeywordWithClients, KeywordNew } from "@/app/lib/definitions";
import { Keyword } from "@prisma/client";



export async function fetchKeywords(): Promise<KeywordWithClients[]> {

  console.log('fetching keywords');
   const keywords: KeywordWithClients[] = await db.keyword.findMany({
      include: {
        clients: true,
        tools: true
      }
    });
   
  
   return keywords;
}
-----------
I don't know if it's linked, but the react-query still put the data in stale, never fresh
tell me if you need more files
American CrocodileOP
This is the app. Btw if I delete a keyword, the data is well refreshed