GraphQL query throws 'QueryKeyMaker cannot handle circular query structures' with simple React Native setup #2442
Description
I spun up a new expo app with expo init, added requisite React/GraphQL dependencies, and was greeted with this fun, unshakable error:
QueryKeyMaker cannot handle circular query structures
whenever any <Query /> component is mounted.
Intended outcome:
I was attempting to query a public graphql endpoint from a simple react-native app, and see either data or a network error with the following dependencies.
package.json dependencies
"dependencies": {
"apollo-boost": "^0.1.16",
"apollo-utilities": "^1.0.21",
"babel-plugin-inline-import-graphql-ast": "^2.4.1",
"expo": "^30.0.1",
"graphql": "^14.0.2",
"graphql-tag": "^2.9.2",
"react": "16.3.1",
"react-apollo": "^2.2.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz"
}// apolloClient.js
export default new ApolloClient({
uri: 'https://fakerql.com/graphql'
})
// App.js
export default class App extends React.Component {
render () {
return (
<ApolloProvider client={apolloClient}>
<Query />
</ApolloProvider>
)
}
}
// query.js
const TEST = gql`
query me {
me {
id
}
}
`
export default class TestQuery extends React.Component {
render () {
return (
<Query query={TEST}>
{({ loading, error, data }) => {
console.log(loading, error, data)
return <View />
}}
</Query>
)
}
}Actual outcome:
The app compiles, and throws immediately with the following stack trace:
How to reproduce the issue:
I've published a minimal example app that crashes with the same error when pointed at a public graphql endpoint. Here's the github repo, with instructions on how to reproduce locally.
It's occuring constantly on my OnePlus 6, with Android 9 Pie. Can't test on iOS (on linux), but would love to know if that happens there as well.
Version
- apollo-client@2.4.2
- react-apollo@2.2.3