T
TanStack•9mo ago
eastern-cyan

Query returning old data after mutation when manually setting data using setQueryData

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getCompanies } from "../services/auth";

const COMPANY_KEY = 'companies';
const SELECTED_COMPANY_KEY = 'selectedCompany';

const useCompanies = () => {
  return useQuery({
    queryKey: [COMPANY_KEY],
    queryFn: async () => {
      return getCompanies();
    },
  });
};

const useSelectedCompany = () => {
  const queryClient = useQueryClient();
  return useQuery({
    queryKey: [SELECTED_COMPANY_KEY],
    queryFn: () => {
      return queryClient.getQueryData([SELECTED_COMPANY_KEY]);
    }
  });
};


const useSelectedCompanyMutation = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (company) => {
      queryClient.setQueryData([SELECTED_COMPANY_KEY], company);
    },
    onSettled: async () => {
      queryClient.invalidateQueries();
    }
  });
};

export { useCompanies, useSelectedCompanyMutation, useSelectedCompany };
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getCompanies } from "../services/auth";

const COMPANY_KEY = 'companies';
const SELECTED_COMPANY_KEY = 'selectedCompany';

const useCompanies = () => {
  return useQuery({
    queryKey: [COMPANY_KEY],
    queryFn: async () => {
      return getCompanies();
    },
  });
};

const useSelectedCompany = () => {
  const queryClient = useQueryClient();
  return useQuery({
    queryKey: [SELECTED_COMPANY_KEY],
    queryFn: () => {
      return queryClient.getQueryData([SELECTED_COMPANY_KEY]);
    }
  });
};


const useSelectedCompanyMutation = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (company) => {
      queryClient.setQueryData([SELECTED_COMPANY_KEY], company);
    },
    onSettled: async () => {
      queryClient.invalidateQueries();
    }
  });
};

export { useCompanies, useSelectedCompanyMutation, useSelectedCompany };
2 Replies
eastern-cyan
eastern-cyanOP•9mo ago
Usage in another hook is as following 
const useThings = () => {
  const { data: companyId } = useSelectedCompanyId()

  return useQuery<Thing[], Error>({
    queryKey: ['Things', companyId],
    queryFn: async () => {
      const response = await getThings(companyId);
      return response.data;
    },
    enabled: !!companyId
  });
};
const useThings = () => {
  const { data: companyId } = useSelectedCompanyId()

  return useQuery<Thing[], Error>({
    queryKey: ['Things', companyId],
    queryFn: async () => {
      const response = await getThings(companyId);
      return response.data;
    },
    enabled: !!companyId
  });
};
useful-bronze
useful-bronze•9mo ago
A query function can be literally any function that returns a promise
getQueryData is a synchronous function
So your useSelectedCompany doesn't make much sense.
setQueryData is a synchronous function
So there's no promise in your mutationFn -> there's nothing to settle -> not sure if the onSettled is even called.

Did you find this page helpful?