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

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"

GitHub

trpc/examples/.experimental/next-app-dir/src/app/post-example/page....

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/trpc

5 Replies

p6l.richard•12mo ago

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 ?

useFormState – React

The library for web and native user interfaces

julius•12mo ago

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

p6l.richard•12mo ago

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?

julius•12mo ago

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

p6l.richard•12mo ago

Got you.