TanStackT
TanStack•9mo ago
sad-indigo

503: Converting Circular Structure to JSON

I am attempting to use query and start together with my REST api

1. Here I have built my server function
export const verifyEmailWithCodeFn = createServerFn({ method: 'POST', response: 'data' })
    .validator(VerifyEmailWithCodeSchema)
    .handler(async ({ data }) => {
        const { http } = await useAxios()

        const response = await http.post<Api.Response.Data<Api.Jwt.Tokens>>(
            '/authentication/email/verification/with-code',
            data,
        )

        return response.data
    })


2. Here I have built a helper function which assembles the mutation
export function verifyEmailWithCodeMutation() {
    return useMutation({
        mutationKey: mutationKeys.identity.authentication.verifyEmailWithCode(),
        mutationFn: (data: VerifyEmailWithCodeSchema) => verifyEmailWithCodeFn({ data }),
        retry: false,
    })
}

3. Here is how I use it in my component
component
const mutation = verifyEmailWithCodeMutation()

mutation.mutate(data, {
    onSuccess: () => {},
    onError: () => {},
})


When this is successful it works perfectly. However I am currently trying to do error handling for when the mutation fails to display the correct error message to my user.

I can see the error clearly server side, normally I would expect to get it err.response.data it looks like this 

  data: {
      message: 'The verification code entered is invalid. Please check the code and try again.',
      details: []
    }


But I am only getting 503s on the client

TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'res' -> object with constructor 'IncomingMessage' --- property 'req' closes the circle at JSON.stringify
Was this page helpful?