TanStack Query变更Query Key后未自动重新获取数据问题

切换排序方式导致Query Key变更后，组件始终展示初始数据，无法自动触发新请求。仅手动调用refetch能获取新数据。当前设置staleTime: 60秒，若设为0会频繁请求，不符合业务需求。

相关代码 #

"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;

解决方案 #

1. 修复queryFn的返回值问题

原代码中queryFn仅执行请求但未返回结果，导致TanStack Query无法获取新数据，始终沿用initialData。需添加return：

queryFn: async () => {
  // 返回请求结果给TanStack Query
  return await getProductsByCategory({
    attributes:[],
    categories: category.id,
  }, sortBy);
},

2. 完善Query Key，包含所有请求依赖参数

Query Key需要覆盖所有影响请求结果的参数（比如分类ID），确保不同参数组合对应独立缓存：

queryKey: ["products", category.id, sortBy],

3. 验证initialData匹配逻辑

确保服务端预取的initialData与初始的sortBy、分类ID完全匹配。当Query Key变更后，由于缓存中无对应新Key的数据，TanStack Query会自动触发新请求，不受staleTime影响（staleTime仅控制已有缓存的过期逻辑）。

修正后的核心代码片段

const { data } = useQuery({
  queryKey: ["products", category.id, sortBy],
  queryFn: async () => {
    return await getProductsByCategory({
      attributes:[],
      categories: category.id,
    }, sortBy);
  },
  initialData: initialData,
  staleTime: 60 * 1000, // 保持60秒的缓存新鲜度
});

内容的提问来源于stack exchange，提问作者sherryyy