React-apollo: Circular JSON errors when using `refetch` in the @apollo/react-hooks branch

Created on 1 Aug 2019 · 2Comments · Source: apollographql/react-apollo

Intended outcome:

Fire a request to refetch data

Actual outcome:

App crashes with error "Unhandled JS Exception: TypeError: Converting circular structure to JSON"

How to reproduce the issue:

have the @apollo/react-hooks branch installed

const ReproComponent = () => {
  const { refetch } = useQuery( /* insert any gql query here */ )
  return (
    <button onClick={ refetch }>click me</button>
  )
}

if you wrap the call to refetch in an anonymous function, it works as expected without errors:

const WorkingComponent = () => {
  const { refetch } = useQuery( /* insert any gql query here */ )
  return (
    <button onClick={ () => refetch() }>click me</button>
  )
}

Version

System:
OS: macOS 10.14.5
Binaries:
Node: 8.12.0 - /usr/local/bin/node
npm: 6.5.0 - ~/.npm-packages/bin/npm
Browsers:
Chrome: 75.0.3770.142
Safari: 12.1.1
npmPackages:
apollo-cache-inmemory: ^1.1.7 => 1.6.2
apollo-cache-persist: ^0.1.1 => 0.1.1
apollo-client: ^2.2.3 => 2.6.3
apollo-link: ^1.1.0 => 1.2.12
apollo-link-context: ^1.0.8 => 1.0.18
apollo-link-error: ^1.1.0 => 1.1.11
apollo-link-http: ^1.5.2 => 1.5.15
apollo-link-rest: ^0.2.4 => 0.2.4
apollo-link-retry: ^2.2.4 => 2.2.14
apollo-link-state: ^0.4.0 => 0.4.2
apollo-upload-client: ^8.1.0 => 8.1.0
react-apollo: ^2.1.4 => 2.5.8

=> also @apollo/react-hooks, but that doesn't log from the npx command

Source

hartbeatnt

👎1

Most helpful comment

I think that onClick = {refetch} passes to refetch-func the event that it receives as an argument and tries to process it.
Dom event is not a valid argument for therefetch function.
You should skip onClick args.

If you worried about that () => refetch() func created on every render, you can do:

function useNoArgs(fn) {
  return useCallback(() => fn(), [fn]);
}

const WorkingComponent = () => {

  const { refetch } = useQuery( /* insert any gql query here */ )
  const doRefetch = useNoArgs(refetch);
  return (
    <button onClick={doRefetch}>click me</button>
  )
}

dqunbp on 1 Aug 2019

👍5

All 2 comments

If you worried about that () => refetch() func created on every render, you can do:

function useNoArgs(fn) {
  return useCallback(() => fn(), [fn]);
}

const WorkingComponent = () => {

  const { refetch } = useQuery( /* insert any gql query here */ )
  const doRefetch = useNoArgs(refetch);
  return (
    <button onClick={doRefetch}>click me</button>
  )
}

dqunbp on 1 Aug 2019

👍5

This was answered in https://github.com/apollographql/react-apollo/issues/3294#issuecomment-517231591, so I'll close it off. Thanks!