Network error: Converting circular structure to JSON on refetch

Question

This is quite a weird problem.

I have a fairly simple query, which runs perfectly well in Graphiql no matter how many times I trigger it

But in browsers the problem appears when I call data.refetch(). Most strange that in Chromium I get Network error: Converting circular structure to JSON when if FF the error is Network error: cyclic object value

In Chrome, where I don't have redux-dev-tools installed, the error is the same as in Chromium

Other queries refetch nicely, but this one is stuck! Of course I've restarted the server many times, cleared the cache, etc..

I am using apollo v2 and the query is nothing special:

query ProductsListQuery($offset: Int!, $limit: Int!) {
  products(offset: $offset, limit: $limit) {
    items {
      id
      title
      shortDescription
      tags
      imagesIds
      __typename
    }
    total
    __typename
  }
}

Result:

{
  "data": {
    "products": {
      "items": [
        {
          "id": "5a39b5469066625581a326c4",
          "title": "Test1",
          "shortDescription": "",
          "tags": [],
          "imagesIds": {
            "main": null
          },
          "__typename": "Product"
        },
        {
          "id": "5a39b55b9066625581a3270b",
          "title": "Test2",
          "shortDescription": "",
          "tags": [],
          "imagesIds": {
            "main": null
          },
          "__typename": "Product"
        }
      ],
      "total": 2,
      "__typename": "ProductsPaginated"
    }
  }
}

Answer 1

Thanks to @Daniel Rearden I've looked into how the refetch is triggered and found out that this doesn't work for reasons I can't explain:

<Button onClick={data.refetch} />

but this works

<Button onClick={() => data.refetch() />