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

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.

Update state of route after submitting the form

trcp

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.

Update state of route after submitting the form

Update state of route after submitting the form

Similar Threads