Cells throwing an error when given children to render

I’m seeing an issue where I’m rendering a Cell with children, something like:

<UsersCell>
  <OtherComponent />
</UsersCell>

Here’s the error I’m getting in the web console:

readFromStore.js:55 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property '_context' -> object with constructor 'Object'
    --- property 'Provider' closes the circle
    at JSON.stringify (<anonymous>)
    at StoreReader.../node_modules/@apollo/client/cache/inmemory/readFromStore.js.StoreReader.diffQueryAgainstStore (readFromStore.js:55)
    at InMemoryCache.../node_modules/@apollo/client/cache/inmemory/inMemoryCache.js.InMemoryCache.diff (inMemoryCache.js:116)
    at QueryInfo.../node_modules/@apollo/client/core/QueryInfo.js.QueryInfo.getDiff (QueryInfo.js:62)
    at ObservableQuery.../node_modules/@apollo/client/core/ObservableQuery.js.ObservableQuery.getCurrentResult (ObservableQuery.js:81)
    at QueryData._this.getQueryResult (QueryData.js:27)
    at QueryData.../node_modules/@apollo/client/react/data/QueryData.js.QueryData.getExecuteResult (QueryData.js:145)
    at QueryData.../node_modules/@apollo/client/react/data/QueryData.js.QueryData.execute (QueryData.js:94)
    at useBaseQuery.js:35
    at useDeepMemo (useDeepMemo.js:6)
    at useBaseQuery (useBaseQuery.js:35)
    at useQuery (useQuery.js:3)
    at Query (withCell.js:32)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at Object.enqueueSetState (react-dom.development.js:12639)
    at PageLoader.../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
    at PageLoader.startPageLoadTransition (page-loader.js:79)
../node_modules/@apollo/client/cache/inmemory/readFromStore.js.StoreReader.diffQueryAgainstStore @ readFromStore.js:55
../node_modules/@apollo/client/cache/inmemory/inMemoryCache.js.InMemoryCache.diff @ inMemoryCache.js:116
../node_modules/@apollo/client/core/QueryInfo.js.QueryInfo.getDiff @ QueryInfo.js:62
../node_modules/@apollo/client/core/ObservableQuery.js.ObservableQuery.getCurrentResult @ ObservableQuery.js:81
QueryData._this.getQueryResult @ QueryData.js:27
../node_modules/@apollo/client/react/data/QueryData.js.QueryData.getExecuteResult @ QueryData.js:145
../node_modules/@apollo/client/react/data/QueryData.js.QueryData.execute @ QueryData.js:94

HOWEVER if I add my own implementation of beforeQuery and make sure that no children are passed to variables, everything works as expected:

export const beforeQuery = (props) => {
  return { variables: {} }
}

I can cause the error again by adding a children key to variables and returning even just an empty fragment:

export const beforeQuery = (props) => {
  console.info(props)
  return {
    variables: { children: <></> }
  }
}

Is there a chance that there’s some particular implementation specific to my app that’s causing this, or does this seem like a likely thing that could happen with the current implementation of cells?

[thisisdylandev]

@thedavidprice @wminshew I am still having problems trying to get this up and running locally, so feel free to take it. Once I am able to get up and running and debugging well, I will try to get on a different issue.

[thedavidprice]

Thanks for letting us know @its-dgreen Feel free to DM me on the Forums (@thedavid) if you’d like some help on local setup and workflow. I could easily point you in the direction of a few resources as well as help directly.

@wminshew assigning this to you.

Thanks, all!