TanStack•3mo ago

national-gold

How to redirect in tanstack mutation ?

any idea ? pass router ? redirect function does not work ( handleRedirects: true )

41 Replies

conscious-sapphire•3mo ago

what do you need exactly? some more context please

national-goldOP•3mo ago

for example if api returns 403 , I want to navigate to login page , in OnError

conscious-sapphire•3mo ago

so you want a generic error handling here? @Ryan Gillie i think we discussed this some time ago

national-goldOP•3mo ago

export function createOrderMutationOptions() {
  return mutationOptions({
    mutationKey: ['orders'],
    mutationFn: async (data: CreateOrder) => {
      const api = await getApi()
      const res = await api('/orders', {
        method: 'POST',
        body: data,
      })
      return res
    },
    onSuccess: async (_, __, ___, { client }) => {
      await client.invalidateQueries({ queryKey: ['orders'] })
    },
    onError: (error) => {
      if (isResponseError(error) && error.status === 400) {
        // redirect please
      }
    },
  })
}

for example and my question is what does handleRedirects: true do ?

  setupRouterSsrQueryIntegration({
    router: router,
    queryClient,
    handleRedirects: true,
  })

conscious-sapphire•3mo ago

it handles redirects thrown for queries

national-goldOP•3mo ago

So , no mutations ?

rival-black•3mo ago

that entire package got rewritten, I don’t think my code is in there anymore 😅 this only handles redirects thrown from server functions using the redirect function

rival-black•3mo ago

https://tanstack.com/start/latest/docs/framework/react/server-functions#redirects

Server Functions | TanStack Start React Docs

What are Server Functions? Server functions let you define server-only logic that can be called from anywhere in your application loaders, components, hooks, or other server functions. They run on the...

rival-black•3mo ago

it doesn’t handle just normal errors, you’d have to do it yourself

conscious-sapphire•3mo ago

yeah i rewrote it but i thought i carried that part over

rival-black•3mo ago

it does, I think he’s just throwing normal Errors instead of using the redirect function What does your server function look like?

national-goldOP•2mo ago

There is no server function Separate backend Any solution ?

conscious-sapphire•2mo ago

what's the target of this redirect? should it perform a client side redirect or a full page reload?

national-goldOP•2mo ago

client side redirect , for full page reload I guess window is ok

conscious-sapphire•2mo ago

you could try router.navigate({href: '/some/location/'})

national-goldOP•2mo ago

how to access router ?

rival-black•2mo ago

try something like

import { type AnyRouter } from "@tanstack/react-router";

// pass in router
export function createOrderMutationOptions(router: AnyRouter) {
  return mutationOptions({
    mutationKey: ['orders'],
    mutationFn: async (data: CreateOrder) => {
      const api = await getApi()
      const res = await api('/orders', {
        method: 'POST',
        body: data,
      })
      return res
    },
    onSuccess: async (_, __, ___, { client }) => {
      await client.invalidateQueries({ queryKey: ['orders'] })
    },
    onError: (error) => {
      if (isResponseError(error) && error.status === 400) {
        return router.navigate({ to: "/" }) // <-- HERE
      }
      
      // Other stuff if not navigation error
    },
  })
}

// usage
const router = useRouter();

const {} = useMutation(createOrderMutationOptions(router));

import { type AnyRouter } from "@tanstack/react-router";

// pass in router
export function createOrderMutationOptions(router: AnyRouter) {
  return mutationOptions({
    mutationKey: ['orders'],
    mutationFn: async (data: CreateOrder) => {
      const api = await getApi()
      const res = await api('/orders', {
        method: 'POST',
        body: data,
      })
      return res
    },
    onSuccess: async (_, __, ___, { client }) => {
      await client.invalidateQueries({ queryKey: ['orders'] })
    },
    onError: (error) => {
      if (isResponseError(error) && error.status === 400) {
        return router.navigate({ to: "/" }) // <-- HERE
      }
      
      // Other stuff if not navigation error
    },
  })
}

// usage
const router = useRouter();

const {} = useMutation(createOrderMutationOptions(router));

Does that work?

national-goldOP•2mo ago

I will check that but I guess yes

like-gold•2mo ago

How do you choose what the status code is when you do a "throw new Error()"?

rival-black•2mo ago

@AMIR if you want to handle it globally you can do something like

export function getRouter() {
    const queryClient = new QueryClient({
        // ...other options
        mutationCache: new MutationCache({
            onError: (error) => {
              const router = getRouterInstance();

              if (isResponseError(error) && error.status === 400) {
                return router.navigate({ to: "" }) // whatever
              }
            },
        }),
        queryCache: new QueryCache({
            onError: (error) => {
              const router = getRouterInstance();

              if (isResponseError(error) && error.status === 400) {
                return router.navigate({ to: "" }) // whatever
              }
            },
        }),
    });

    const router = createRouter({
        routeTree,
        context: {
            queryClient
        },
        // ...other options
    });

    setupRouterSsrQueryIntegration({ router, queryClient });

    return router;
}

export function getRouter() {
    const queryClient = new QueryClient({
        // ...other options
        mutationCache: new MutationCache({
            onError: (error) => {
              const router = getRouterInstance();

              if (isResponseError(error) && error.status === 400) {
                return router.navigate({ to: "" }) // whatever
              }
            },
        }),
        queryCache: new QueryCache({
            onError: (error) => {
              const router = getRouterInstance();

              if (isResponseError(error) && error.status === 400) {
                return router.navigate({ to: "" }) // whatever
              }
            },
        }),
    });

    const router = createRouter({
        routeTree,
        context: {
            queryClient
        },
        // ...other options
    });

    setupRouterSsrQueryIntegration({ router, queryClient });

    return router;
}

It's weird because the router needs the queryClient but the queryClient needs the router so gotta do some weird typescript stuff with null! and then set it later, @Manuel Schiller correct me if I'm wrong but I think this should work The reason it has to be done this way is because it only handles redirects thrown from server function redirects, if it's from an outside source you gotta do it yourself

national-goldOP•2mo ago

I tried globally and it works well , but I was looking for a way to don't pass router, for example throw redirect , we can get redirect error in on Error Globally , and we can check that with isRedirect function , if there is a way to handle that there , it will be great

rival-black•2mo ago

My way globally should work

conscious-sapphire•2mo ago

we have a getRouterInstance() as well

rival-black•2mo ago

Oh, sick

national-goldOP•2mo ago

💀 Does It return router ?

conscious-sapphire•2mo ago

well.. what else could it return ? 😄

national-goldOP•2mo ago

Good answer (:

rival-black•2mo ago

Updated my comment above using getRouterInstance oh so you mean in your createMutationOptions you throw redirect? I don't know if that would work because of the way of mutationOptions and the cache interaction w/ callbacks

national-goldOP•2mo ago

Yes, but if getRouterInstance() works , we don't need that

like-gold•2mo ago

How do you determine the error.status?

rival-black•2mo ago

wasn’t my code I have no idea what the isResponseError method does ¯\_(ツ)_/¯

national-goldOP•2mo ago

It’s from up-fetch, detecting HTTP errors. Why don't we have it in tanstack router ? It's from tanstack start

conscious-sapphire•2mo ago

because start instantiates the router and thus can provide access to said instance

rival-black•2mo ago

@Manuel Schiller, actually there is like the tiniest bug with @tanstack/react-router-ssr-query, looks like query updated the signature of onError in 5.89.0 from (error, variables, context, mutation) -> (error, variables, onMutateResult, mutation, context), so now those things aren't being forwarded on properly in the case of a non-redirect errors Want me to PR?

xenial-black•2mo ago

We didn't change the order or anything, we just added a param at the end

rival-black•2mo ago

~~https://github.com/TanStack/query/pull/9615/files#diff-c310230651a51c14fcd3f2204e05cd47f4c487215d8105f6bb7ff3bff7b2b983L17 line 17 (mutation.ts)~~ ~~https://github.com/TanStack/query/pull/9615/files#diff-970fba167b33d656f32ce4cdf6c35ea6797e562c4768d27a5361aaaff0bda6e8R189 line 189 (mutationObserver.ts, new)~~ ohhhhhhhhhhhhhhhhh, I see. You renamed things. onMutateResult is the old context either way that new param needs to be forwarded on

conscious-sapphire•2mo ago

sure create a PR!

rival-black•2mo ago

hmmm, should I also update the package.json to use >= 5.89.0? It would be out of sync of all the other examples in the repo (everything uses >= 5.66.0)

conscious-sapphire•2mo ago

sure, bump query

rival-black•2mo ago

https://github.com/TanStack/router/pull/5379

GitHub

Fix rest Parameters of react-router-ssr-query by ryanagillie · P...

Tanstack Query recently updated (5.89.0) to pass another parameter to its onError callbacks, which wasn&#39;t being forwarded on correctly when using this package. It was capturing and forwardi...

rival-black•2mo ago

Turns out it didn't need the bump, just used a spread instead so it'll work with any version

Gaming

Programming

How to redirect in tanstack mutation ?

Did you find this page helpful?