useful-bronze

Update state of route after submitting the form

Hi guys! I am pretty new to whole TanStack. I have started to use Router and Form which I like both very much. I am using tRPC for loading data into routes and I would like to use tRPC for Form submissions as well. But everytime I submit some data the page does not reload the state. I might be missing something like maybe Query here? Currently the tRPC is injected to my router through Context according to this example: https://tanstack.com/router/latest/docs/framework/react/examples/with-trpc In the Form I use just trcp variable which is exported like this:

import type { AppRouter } from "@app/api/router";
import { createTRPCClient, httpBatchLink } from "@trpc/client";

export const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: "/api",
    }),
  ],
});

import type { AppRouter } from "@app/api/router";
import { createTRPCClient, httpBatchLink } from "@trpc/client";

export const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: "/api",
    }),
  ],
});

eg. then in Form I use it like this:

// here I import `trcp` from the file described above

const form = useForm({
  defaultValues: {
    memberId: "",
  },
  onSubmit: async ({ value }) => {
    await trpc.groupMembersAdd.mutate({
      groupId,
      memberId: value.memberId,
    });
  },
});

// here I import `trcp` from the file described above

const form = useForm({
  defaultValues: {
    memberId: "",
  },
  onSubmit: async ({ value }) => {
    await trpc.groupMembersAdd.mutate({
      groupId,
      memberId: value.memberId,
    });
  },
});

Do I need to use Query here or is there any other way to revalidate data on page? When I refresh or navigate to the same page it works but I guess there is better way to do this 🙂

React TanStack Router With Trpc Example | TanStack Router Docs

An example showing how to implement With Trpc in React using TanStack Router.

5 Replies

deep-jade•2mo ago

so you want to reload the form to contain the new data that was submitted?

useful-bronzeOP•2mo ago

not exactly, but it is similar. I have Route with loader which returns data through trpc. Then I have form which mutates data through trpc. And after the submitting the form I want to re-render the route with new data from route loader. Route loader contains more data than mutation from Form returns

deep-jade•2mo ago

Well, I'm not sure TanStack Form can help out with that. But I see that you asked in #router for advice, so hopefully they can suggest a better solution! if the default values were dependent on data coming in from trpc, that would likely need a form.reset() after the mutation to read the values. But this question seems to be targeted at the whole mutate from trpc

useful-bronzeOP•2mo ago

I tried to use Query as well and connected it to Router and Form but still I think I am missing something like "refetch" array of queries... And I think the solution is to ensure data in Route loader and then again in the component use useQuery to actually fetch data and then use refetch from useQuery in onSubmit - I think this is not very good DX as I would need to call everything twice.

deep-jade•2mo ago

well, take what I say with a grain of salt (since I am not familiar with tprc), but ideally a mutation can cause side effects on success in TanStack Query, that side effect would be invalidating queries with the query key that got updated. It would force a refetch from all queries whose queryKey starts with the provided values that way you keep the mutation logic at the location where it's created, not at the location it's called

Gaming

Programming

Update state of route after submitting the form

Did you find this page helpful?