T
TanStack•4mo ago
sunny-green

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
    })
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,
    })
}
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: () => {},
})
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: []
    }
  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
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
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?