Theo's Typesafe Cult•10mo ago

is there caching in tRPC

I am trying to fetch new data on state change, const [categories, setCategories] = useState<categoryType[]>([]); // Initialize with an empty array useEffect(() => { const getCategories = async () => { const categoriesRes = await api.category.getCategories.query()
console.log(categoriesRes); // Use categoriesRes instead of categories setCategories(categoriesRes); }
getCategories(); }, [isCategoryClosed, afterFetch, isCategoryOpened]); even though Im directly logging the response, I see the same categoriesRes being returned, but when the page is refreshed it works as expected by returning the newly added categories. Any idea why this is happening.

4 Replies

whatplan•10mo ago

const [categories, setCategories] = useState<categoryType[]>([]);
useEffect(() => {
    const getCategories = async () => {
      const categoriesRes = await api.category.getCategories.query()
      console.log(categoriesRes); // Use categoriesRes instead of categories
      setCategories(categoriesRes);
    }

    getCategories();
  }, [isCategoryClosed, afterFetch, isCategoryOpened]);

const [categories, setCategories] = useState<categoryType[]>([]);
useEffect(() => {
    const getCategories = async () => {
      const categoriesRes = await api.category.getCategories.query()
      console.log(categoriesRes); // Use categoriesRes instead of categories
      setCategories(categoriesRes);
    }

    getCategories();
  }, [isCategoryClosed, afterFetch, isCategoryOpened]);

please dont do this. heres why: trpc comes with its own wrapper for react query, which has an extremely well implemented cache (plus a bunch of extremely other helpful stuff like loading and error states) and trpc makes it trivial to granularly invalidate parts of it which will then be automatically be refetched besides that, useEffect here is a footgun when used this way and should be avoided. you should try to move this logic to event handlers as much as possible before resorting to useEffect. So in this case whatever event is modifying isCategoryClosed, just put the revalidate call there. Heres what that could look like:

function Component() {
  const { data, isLoading, isError, error } = api.category.getCategories.useQuery()

  const utils = trpc.useContext();

  const handleOpen = () => {
    // ... whatever else you want to
    utils.category.getCategories.invalidate()
  }

  return (
    <div>
      <CatergoryTray onOpen={handleOpen} />
    </div>
  )
}

function Component() {
  const { data, isLoading, isError, error } = api.category.getCategories.useQuery()

  const utils = trpc.useContext();

  const handleOpen = () => {
    // ... whatever else you want to
    utils.category.getCategories.invalidate()
  }

  return (
    <div>
      <CatergoryTray onOpen={handleOpen} />
    </div>
  )
}

useContext | tRPC

useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...

BootesVoid•10mo ago

Thanks a lot I cant use useQuery and useMutation how do I set this up? Does it not come by default with create-t3-app?

cje•10mo ago

what do you mean you can't use useQuery and useMutation? it's on api.someRouter.someProcedure

BootesVoid•10mo ago

Im sorry, im new to this, but currently Im using api.someRouter.someProcedure.mutate() or .query() how do I set it up to use useQuery() ? I am using ct3a beta app router version btw. Yo

Gaming

Programming

is there caching in tRPC