Theo's Typesafe Cult•2y ago

Can I pass refetch as a prop?

Title basically.. The thing is that I am fetching all of my items in component#1, I use them there and I also pass them as a prop to component#2, there I can create a new item. thing is that I would like to use the refetch function in component#2 that comes along the useQuery (which is in component#1). Is it even something I should do or is it a bad design choice on my end? How do I approach this issue?

19 Replies

barry•2y ago

https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientrefetchqueries Example

const queryClient = useQueryClient();
queryClient.refetchQueries({ queryKey: ['posts', 1], type: 'active', exact: true })

const queryClient = useQueryClient();
queryClient.refetchQueries({ queryKey: ['posts', 1], type: 'active', exact: true })

Look into refetching

Eylon•2y ago

what would the query key look like in mycase?

  const { data: tasks, refetch: refetchTasks } = api.task.getAll.useQuery(
    {
      columnIds: columns?.map((column) => column.id) || [],
    },
    {
      enabled: sessionData?.user !== undefined,
      onSuccess: (data) => setItems(data),
    }
  );

  const { data: tasks, refetch: refetchTasks } = api.task.getAll.useQuery(
    {
      columnIds: columns?.map((column) => column.id) || [],
    },
    {
      enabled: sessionData?.user !== undefined,
      onSuccess: (data) => setItems(data),
    }
  );

in this case is my query key task.getAll ?

barry•2y ago

good question maybe lol

Eylon•2y ago

I've tried task, task.getAll, capitalized and non capitalized, nothing works lol using

queryClient.refetchQueries()

queryClient.refetchQueries()

works but it refetches all of my queries

Unknown User•2y ago

Message Not Public

Paweł•2y ago

You can use react query devtools to see query keys 😉

barry•2y ago

What if he has to do it somewhere else 😂 it’s a temporary solution

Eylon•2y ago

The refetch function type is something ridiculous and doesn’t work Will try!

barry•2y ago

I dug a little deeper

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

getQueryKey(api.example.hello, undefined);

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

getQueryKey(api.example.hello, undefined);

const utils = api.useContext();

//
await utils.example.hello.invalidate();

const utils = api.useContext();

//
await utils.example.hello.invalidate();

Eylon•2y ago

Just tested, this works

barry•2y ago

For some reason this wont work at all for me locally, not even calling refetch 🤣 I think I just broke my app somehow but should work for you lol

Eylon•2y ago

lol

barry•2y ago

Maybe calling with utils is more logical than getQueryKey But yh Good to see it's working for you

Eylon•2y ago

its great its still very interesting that u have to dig out everything like all of this stuff is very new

barry•2y ago

Only reason I got this was just cuz I had forgotten this was a thing It's not new lel I'm just potato

Gaming

Programming

Can I pass refetch as a prop?