T
TanStack•10mo ago
fair-rose

Partial matching with setQueryData

I'm using the following query key in my project like this: 
export const evaluationKeys = {
  all: ["evaluations"] as const,

  contents: (contentId: string, filters?: string) =>
    [
      ...evaluationKeys.all,
      "contents",
      contentId,
      ...(filters ? [{ filters }] : []),
    ] as const,
};
export const evaluationKeys = {
  all: ["evaluations"] as const,

  contents: (contentId: string, filters?: string) =>
    [
      ...evaluationKeys.all,
      "contents",
      contentId,
      ...(filters ? [{ filters }] : []),
    ] as const,
};
When I try to update the query cache using setQueryData, like this: 
queryClient.setQueryData<EvaluationPayload[]>(
  evaluationKeys.contents(contentId),
  (currentEvaluationCache) => {
    if (!currentEvaluationCache) return [];
    return currentEvaluationCache.map((evaluation) => {
      if (evaluation.id === evaluationId) {
        return { ...evaluation, ...payload };
      }
      return evaluation;
    });
  }
);
queryClient.setQueryData<EvaluationPayload[]>(
  evaluationKeys.contents(contentId),
  (currentEvaluationCache) => {
    if (!currentEvaluationCache) return [];
    return currentEvaluationCache.map((evaluation) => {
      if (evaluation.id === evaluationId) {
        return { ...evaluation, ...payload };
      }
      return evaluation;
    });
  }
);
It doesn't work as expected. Can we update cached data using a partial query key, or does setQueryData require an exact match? If so, how can I fix this issue?
2 Replies
absent-sapphire
absent-sapphire•10mo ago
It requires an exact key. setQueriesData is fuzzy and can set data for multiple entries at the same time
fair-rose
fair-roseOP•10mo ago
thanks for the answer sir !!

Did you find this page helpful?