TanStackT
TanStack•7mo ago•
7 replies
specific-silver

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


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.
React TanStack Router With Trpc Example | TanStack Router Docs
Was this page helpful?