I use https://formidable.com/open-source/urql/ for fetching data from GraphQL server in React Native.
The component is implemented as follows:
import React from "react"
import { View, Text } from "react-native"
import { HashtagsProps } from "./types"
import { useQuery } from "urql";
const HashtagsQuery = `
query {
searchHashtags(input: {pattern: "vegan"}) {
id
name
}
}
`
export default function Hashtags({ navigation }: HashtagsProps) {
const [result] = useQuery({
query: HashtagsQuery
})
const { data, fetching, error } = result;
if (fetching) console.log("loading");
if (error) console.log(error.message);
console.log(data)
return (
<View>
<Text>Hashtags</Text>
</View>
)
}
When running the app, the query works as expected and I receive data from GraphQL server.
However, the console shows error messages:
Unhandled promise rejection, [RangeError: Maximum call stack size exceeded.] at node_modules/core-js/internals/host-report-errors.js:5:32 in module.exports at http://192.168.178.27:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:205269:138 in dispatchEvent at node_modules/core-js/modules/es.promise.js:163:23 in perform$argument_0 at node_modules/core-js/internals/perform.js:3:20 in module.exports at node_modules/core-js/modules/es.promise.js:160:22 in task.call$argument_1
I use expo version ^42.0.0.
I also tried to omit graphql query as follows:
export default function Hashtags({ navigation }: HashtagsProps) {
return (
<View>
<Text>Hashtags</Text>
</View>
)
}
and the error messages do not appear anymore.
What am I doing wrong?