❓-help

How can I use `onSettled` in the `experimental_createTRPCNextAppDirClient`?

Pp6l.richard

11/3/2023

Context I want to migrate the following trpc/client hook to the experimental version

const searchMandate = api.mandate.search.useMutation({
    onSettled: (data) => {
      searchQueryMethods.reset();
      data?.length
        ? toast.success(`Found ${data?.length} companies.`)
        : toast.message("No companies found.");
    },
  });

const searchMandate = api.mandate.search.useMutation({
    onSettled: (data) => {
      searchQueryMethods.reset();
      data?.length
        ? toast.success(`Found ${data?.length} companies.`)
        : toast.message("No companies found.");
    },
  });

However, the experimental_createTRPCNextAppDirClient exposes the mutation directly, not the useMutation anymore Problem - the ClientContext from the ProcedureArgs doesn't seem to accept any callback configuration? (the ...args type for the mutation on the consumer is any but I assume it's still the actual type) - checking the trpc example I see it show cases a mutation without any callback configs (https://github.com/trpc/trpc/blob/cf5783bebbec295db84ec7b5dafa33da114379ad/examples/.experimental/next-app-dir/src/app/post-example/page.tsx) - I also peeked at @julius's awesome acme-corp but it's similar to the trpc example in that it doesn't make use of callbacks. version: "@trpc/client": "11.0.0-alpha-next-2023-11-01-15-02-16.94"

Pp6l.richard

11/3/2023

Or would the nextjs style to handling this be something like: - use React's useFormState hook https://react.dev/reference/react-dom/hooks/useFormState for form state (or the form library of your choice) - move the trpc mutation in a server action ?

Jjulius

11/3/2023

You want a React client (createTRPcReact) if you wanna use useMutation useFormStstus is for server actions mainly

Pp6l.richard

11/3/2023

but it seems that experimental_createTRPCNextAppDirClient is intended for client but doesn't return a useMutation. does that mean that if I want to useMutation, i stay on v10?

Jjulius

11/3/2023

No you just have to create the trpc React providers yourself (see t3-turbo or t3-app)

Pp6l.richard

11/7/2023

Got you.

Looking for more? Join the community!

❓-help

❓-help

Recommended Posts

Stop initial refetch when prefetched with SSG helpersAnyone else struggling with this, I want to maintain refetching when the tab is refocused but don't Accessing QueryFunctionContext within server queriesHello, I know that the field 'direction' is a new addition within react query v5 as part of the Que HTTP 431: Input too longHi, we're using a complex query (multiple filters etc) with tRPC and react query integration. It h Function to release context post-batching?In our application every customer has their own schema, therefore we need a db client per request wh forwarding headers in solidjsI have a setup with solidstart, and im trying to forward the client headeres to ttrpc. Here's my se Support @tanstack/react-query 5.4.3will it support 5.4.3 @tanstack/react-query when i install above version with my next.js it unable t Help with inferring output```ts return ctx.prisma.product.findMany({ include: { price: { select: { Would you recommend tRPC’s usage in this case?So we have two applications, one existing, one about to be started. These two applications will talk How to limit payload size?Is there a way to limit the payload size? E.g., if a particularly large JSON payload is sent to the Next.js app directoryHi. I have been able to set up tRPC with the app directory in Next.js. It was a frustrating experien trpc errorTrpc not working in next js 14 app router. Please help me to resolve Feature or happy accident: error message from `cause` being used as TRPC's error messageWhen a procedure throws a TRPC error with no message, it turns out that if the thrown error has a ca When error in tRPC route, the error message is vaugeThere are no line numbers when a runtime error happens in a tRPC route. Surely I am missing somethin How to have 2 separate trpc clients for http and websockets?I'm trying to have a setup where I can use trpc with 2 separate clients, one for normal HTTP request How to configure context for a standalone server?Are there any examples out there on how to set up context for a standalone server? The docs do inclu Docs hard to follow with so much `next` codeNot having a great experience with the docs. There are many examples that use `next`, making it hard