Alaskan donut•5d ago

Fetch once and never again?

Hey there 👋, I'm wanting to fetch some data reactionTypes once when my layout <MainLayout /> renders in Nextjs and never again because this data does not change. Currently, I have placed (what I think is) a headless component into my layout that accesses the query client then sets a staleTime: Infinity default on this specific query. Is this a dumb strategy? How might you do this differently?

"use client";

import { trpc } from "@/utils/trpc";
import { useQueryClient } from "@tanstack/react-query";
import { getQueryKey } from "@trpc/react-query";

export function TrpcMainLayoutDefaults() {
  const queryClient = useQueryClient();

  // Reaction Types
  const reactionTypesKey = getQueryKey(trpc.reaction.getTypes);
  queryClient.setQueryDefaults(reactionTypesKey, {
    staleTime: Infinity,
  });
  // I had originally prefetched, but it seems this just adds an unneeded request (understandably)
  // trpc.useUtils().reaction.getTypes.prefetch()

  // Other...

  return <></>;
}

"use client";

import { trpc } from "@/utils/trpc";
import { useQueryClient } from "@tanstack/react-query";
import { getQueryKey } from "@trpc/react-query";

export function TrpcMainLayoutDefaults() {
  const queryClient = useQueryClient();

  // Reaction Types
  const reactionTypesKey = getQueryKey(trpc.reaction.getTypes);
  queryClient.setQueryDefaults(reactionTypesKey, {
    staleTime: Infinity,
  });
  // I had originally prefetched, but it seems this just adds an unneeded request (understandably)
  // trpc.useUtils().reaction.getTypes.prefetch()

  // Other...

  return <></>;
}

0 Replies

No replies yetBe the first to reply to this messageJoin