tanstack-query won't fetch proper data when key changes

Question

whenever i change the sorting to something else, the query key changes but no refetch is done. So its always the initial data being shown despite changes to query key.

"use client";
import { getProductsByCategory } from "@/utils/graphqlUtils";
import { useQuery } from "@tanstack/react-query";
import { useSearchParams } from "next/navigation";
import {
  parseAsBoolean,
  parseAsString,
  useQueryState,
} from "next-usequerystate";
import SortingDropDown from "./Filtering/SortingDropDown";
import {
  getFilterOptions,
  getPillsData,
  parseQueryAttributeFilters,
  serializeQueryAttributeFilters,
} from "./Filtering/attribute";
import { useEffect, useState } from "react";
import FilterPills from "./Filtering/FilterPills";
import AttributeDropdown from "./Filtering/AttributeDropdown";
function combineArraysInObject(obj) {
  return Object.values(obj).flat();
}

function Test({
  params,
  initialData,
  attributeFiltersData,
  categoryIDs,
  collectionIDs,
}) {
  //O---SORTING START
  const searchParams = useSearchParams();
  const search = searchParams.get("sortBy") || undefined;

  const [sortBy, setSortBy] = useQueryState(
    "sortBy",
    parseAsString
      .withOptions({
        history: "replace",
      })
      .withDefault(search || null)
  );
  //X---- SORTING END

  const { data } = useQuery({
    queryKey: [sortBy],
    queryFn: async () => {
      await getProductsByCategory({
        attributes:[],
        categories: category.id,
      },sortBy);
    },
    initialData: initialData,
  });
  console.log("PIPING HOT DISPLAY", data,sortBy);
  const {
    products: { edges },
  } = data;
  return (
    <div className="min-h-screen bg-pink-500 text-black">
      <SortingDropDown setSortBy={setSortBy} search={search} />
      <div> products showing items</div>
      {edges?.map(({ node }) => (
        <div key={node.id}>{node.name}</div>
      ))}
    </div>
  );
}

export default Test;

I have tried using other combos of querykeys to see if it refetches somehow but its always the same unless i explicitly click on refetch. My stale time is set to 60*1000. If i set it to 0, it's always refetching and kind of defeats the purpose of what i am trying to do

Answer 1

After experimenting and carefully examining the docs again, i found the issue. İt was because i didn't hydrate it. This drawback when using the inital data method is mentioned in the docs :

If there is already data in the cache for a query, initialData will never overwrite this data, even if the new data is fresher than the old one. To understand why this is especially bad, consider the getServerSideProps example above. If you navigate back and forth to a page several times, getServerSideProps would get called each time and fetch new data, but because we are using the initialData option, the client cache and data would never be updated.

After following the instructions to set up hydration, it was working fine