Theo's Typesafe Cult•3y ago

change query params without rerender

When you useMutation with trpc, you call the endpoint with some input when you call .mutate, which is easy enough to do when you click a button or something. Is it possible to do the same with a query? useQuery takes the input and I don't see a way to change that without rerendering and calling useQuery again - eg type something in a text box and use it for a query without rerendering. I know queries and mutations are pretty much the same under the hood so the solution is to just use a mutation instead but it feels semantically weird to the point that I feel like I'm missing something.

4 Replies

Kseikyo•3y ago

I just joined and never used tRPC, but I see that it’s a wrapper to react query. Assuming you just want to manually trigger the refetch, you can get this function from the useQuery https://tanstack.com/query/v4/docs/reference/useQuery But your use case seems more like it depends on an input, so you can have that data as a param to the useQuery, as well as setting its key based on this value. It should still re-render, as I don’t think you can change the data in the UI without a re-render.

useQuery | TanStack Query Docs

const { data,

Unknown User•3y ago

Message Not Public

scatterOP•3y ago

i may be very stupid. i was thinking mutation semantics let me update stuff without rerendering, but i'm pretty sure i was just wrong

ironnator•3y ago

I might not be understanding your question fully, but if you're trying to trigger it to refetch (say for an input change), the second param on the useQuery hook would do that for you. From their docs: https://tanstack.com/query/v4/docs/examples/react/basic

function usePost(postId) {
  return useQuery(["post", postId], () => getPostById(postId), {
    enabled: !!postId,
  });
}

function usePost(postId) {
  return useQuery(["post", postId], () => getPostById(postId), {
    enabled: !!postId,
  });
}

So when the postId changes (or in your case, you would put the inputValue instead of the postId), it would trigger the refetch.

Gaming

Programming

change query params without rerender