#Update state of route after submitting the form

7 messages · Page 1 of 1 (latest)

short river
#

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",
    }),
  ],
});

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,
    });
  },
});

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.

zealous drum
short river
#

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

zealous drum
#

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

short river
#

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.

zealous drum