T
TanStack•2y ago
rare-sapphire

re-route and fetch new data via refetchQueries

i want when click to a button to re-route and fetch new data base search params when i wait for refetchInterval to refetch data it success but i'm looking for similar behavior via queryClient.refetchQueries({ queryKey: ['x'] }); but i don't success, any help to trigger the update? update: queryClient.clear() seem work but i want to clear specific queryKey?
8 Replies
xenial-black
xenial-black•2y ago
queryClient.invalidateQueries?
rare-sapphire
rare-sapphireOP•2y ago
i try invalidateQueries but not update route to new search params
xenial-black
xenial-black•2y ago
Are search params in query key?
rare-sapphire
rare-sapphireOP•2y ago
My situation is as follows: I've set refetchInterval to 1000 * 60 (1 minute). When adding search parameters like http://localhost:3000/?type=samples or http://localhost:3000/?type=shipment, I want the query to update itself directly when the search parameters changes. I've tried using invalidateQueries and refetchQueries, but they don't work. However, when the refetchInterval hits, the update is successful. Unfortunately, I cannot find any queryClient.X method to refresh the query in the same way as refetchInterval. For now, I am using queryClient.clear(), but it's not ideal because it updates the entire page and all queries. Is there any solution to this issue?
absent-sapphire
absent-sapphire•2y ago
is the search param part of the queryKey ?
rare-sapphire
rare-sapphireOP•2y ago
@TkDodo 🔮 yes queryKey="shipments", and one of searchParam="shipment" i try to change the searchParam but still not effected! // useShipments hooks 
export default function useShipments() {
  const searchParams = useSearchParams();
  const url = `/api/import/shipments?${searchParams.toString()}`;
  const { isLoading, error, data, isPending } = useQuery({
    queryKey: ['shipments'],
    queryFn: () => fetcherReq(url),
    refetchInterval: 1000 * 60,
  });
...}
export default function useShipments() {
  const searchParams = useSearchParams();
  const url = `/api/import/shipments?${searchParams.toString()}`;
  const { isLoading, error, data, isPending } = useQuery({
    queryKey: ['shipments'],
    queryFn: () => fetcherReq(url),
    refetchInterval: 1000 * 60,
  });
...}
// add searchParams 
router.push(`${pathname}?${newQueryString}`, {
        scroll: false,
      });
router.push(`${pathname}?${newQueryString}`, {
        scroll: false,
      });
// route get shipments 
export async function GET(req: NextRequest, context) {
  const currentUser = await getCurrentUserSS();
  const searchParams = req.nextUrl.searchParams;
  const from = searchParams.get('from');
  const to = searchParams.get('to');
  const type = searchParams.get('type');
  const take = searchParams.get('take') || from ? 300 : undefined;
  const isSample = type === 'sample';
  const isNewSample = type === 'newSamples';
  const isConditionalRelease = type === 'conditionalRelease';
  const isReject = type === 'reject';

  const shipments = await prisma.shipment.findMany({
    where: {
      createdAt: {
        gte: from ? new Date(from) : undefined,
        lte: to ? new Date(to) : undefined,
      },
      portName: {
        in: [currentUser?.portName, currentUser?.portName_en],
      },
      products: {
        some: {
          sampleName: isSample ? { not: null } : undefined,
          status: isNewSample
            ? { contains: 'newSample' }
            : isConditionalRelease
            ? { contains: 'conditionalRelease' }
            : isReject
            ? { contains: 'reject' }
            : undefined,
        },
      },
    },
    take: take ? take : undefined,
  });
  return NextResponse.json(shipments);
}
export async function GET(req: NextRequest, context) {
  const currentUser = await getCurrentUserSS();
  const searchParams = req.nextUrl.searchParams;
  const from = searchParams.get('from');
  const to = searchParams.get('to');
  const type = searchParams.get('type');
  const take = searchParams.get('take') || from ? 300 : undefined;
  const isSample = type === 'sample';
  const isNewSample = type === 'newSamples';
  const isConditionalRelease = type === 'conditionalRelease';
  const isReject = type === 'reject';

  const shipments = await prisma.shipment.findMany({
    where: {
      createdAt: {
        gte: from ? new Date(from) : undefined,
        lte: to ? new Date(to) : undefined,
      },
      portName: {
        in: [currentUser?.portName, currentUser?.portName_en],
      },
      products: {
        some: {
          sampleName: isSample ? { not: null } : undefined,
          status: isNewSample
            ? { contains: 'newSample' }
            : isConditionalRelease
            ? { contains: 'conditionalRelease' }
            : isReject
            ? { contains: 'reject' }
            : undefined,
        },
      },
    },
    take: take ? take : undefined,
  });
  return NextResponse.json(shipments);
}
absent-sapphire
absent-sapphire•2y ago
no, your query key is just ['shipments'],. It needs to be ['shipments', url], because you're using the url inside the queryFn. This is well documented and we also have an eslint rule that can catch these mistakes.
rare-sapphire
rare-sapphireOP•2y ago
ok let me try it i forget about eslint i should use it finally it works, thanks a lot @TkDodo 🔮 you're genius 😍 I use eslint now, now it's clear what i miss before, good dev experience

Did you find this page helpful?