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

EylonOP•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

EylonOP•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

EylonOP•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();

EylonOP•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

EylonOP•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

EylonOP•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

EylonOP•2y ago

i mean the integration between everything.. I even resorted to chatgpt but nothing of value was found

barry•2y ago

chatgpt is like up till 2019 or something no? trpc is after 2019

EylonOP•2y ago

Like googling most of my issues isnt as effective as it it was i mean with other stacks

barry•2y ago

t3 stack is quite new yh was fun seeing the cli transform from a little potato to adding stuff and it becoming more and more complex

Gaming

Programming

Can I pass refetch as a prop?