Search code examples
javascriptreactjsserver-side-renderingcircular-dependencyreact-query

React query ssr TypeError: Converting circular structure to JSON


I'm following the react-query ssr documentation but I'm getting an error. What am I doing wrong? I know what is circular structure. but in the documentation everything works fine

https://tanstack.com/query/v4/docs/guides/ssr

Error text and code example


Solution

  • The problem is that you are returning everything that axios gives you from the queryFn. axios responses contain lots of meta data that are a) not json serializable and b) you likely don't want to include. The whole RequestConfig is included in the response, which is where the error is coming from.

    What you want is to only extract the .data property from axios and return that, because that's the json response:

    await queryClient.prefetchQuery(
      ['todos'],
      () => axios.get(url).then(response => response.data)