TanStack Query为何取消首个查询并重新发起？

我通过Context管理查询逻辑，用户点击“更新全部数据”按钮时，会向查询添加forceUpdate参数（格式类似address?forceUpdate=唯一值），但带有该参数的查询被无故取消，无法定位原因。即使移除forceUpdate参数，问题依旧，查询取消原因显示为“无原因”。

相关代码逻辑 #

1. 更新forceUpdate的处理函数 #

const forceUpdateHandler = async () => {
    await queryClient.cancelQueries([QueryKeys.DATA_FROM], { exact: false })
    setForceUpdate(v4())
}

2. 传入forceUpdate的Context Provider #

<QueryParametersContextProvider
      forceUpdate={forceUpdate}
      startArgs={startArgs}
      value={{
        queryParameters: new Map(dashboardParams?.queryParameters),
        applyQueryParameter: (param) => applyParameters({ queryParameters: param }),
        removeQueryParameter: removeParameter,
        forceUpdate
      }}>
</QueryParametersContextProvider>

3. 处理forceUpdate参数的自定义Hook #

export const useQueryParams = (paramsForObserve?: Partial<IHashParameter>[]): UseQueryParamsResult => {

// other code with other logic
  const context = useContext(QueryParametersContext)

  const prevUpdate = useDeferredValue(context.forceUpdate)

  const parameters = useMemo<QueryParameters>(() => {
    const initQueryParams: QueryParameters = paramsForObserve?.some(p => p?.key === ReservedKeys.expanded) ?
      new Map([[ReservedKeys.expanded, fullScreen]]) :
      new Map()

    const observableParams = paramsForObserve?.reduce((prev, curr) => {
      return curr?.key !== ReservedKeys.expanded
        ? new Map(prev.set(curr?.key, context.queryParameters?.get(curr?.key)))
        : prev
    }, initQueryParams as QueryParameters)

    if (prevUpdate !== context.forceUpdate) {
      const baseParamsForUpdate = new Map(reservedParams.reduce((prev, curr) => prev.set(curr, context.queryParameters.get(curr)), initQueryParams))
      const result = new Map([...Array.from(baseParamsForUpdate), ...Array.from(observableParams ?? []), [ReservedKeys.forceUpdate, context.forceUpdate]])
      return result
    }

    return observableParams

  }, [context.queryParameters, paramsForObserve, context.forceUpdate, fullScreen])

  return [
    parameters, applyParameters, removeParameter, getParametersByKey
  ]
}

4. 数据查询逻辑 #

const dataQueryKey = useMemo(() => [QueryKeys.DATA_FROM, object, view,
  ...parametersForHash?.map(({ key, value }) =>
    `${key}=${typeof value === 'object'
      ? JSON.stringify(value)
      : value}`)]
    , [parametersForHash])

  const dataQuery = useMemo(() => ({
    queryKey: dataQueryKey,
    queryFn: fetchDataFromSource(parameters)({ object, view }),
    ...defaultQueryConfig,
    enabled: (!loadingObservablegQP || !useQueryParameters) && !!object && enable,
    refetchOnMount: false,
    retryOnMount: false,
    refetchInterval: interval,
    refetchIntervalInBackground: true,
  }), [dataQueryKey, loadingObservablegQP, parametersForHash])


  const data = useQuery(dataQuery)

补充信息 #

点击“更新全部数据”后的网络请求截图显示查询被取消。

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