RangeError: Maximum call stack size exceeded React Native

Viewed 1607

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?

1 Answers

It seems that your query will try to call every time. Can you please wrap with useEffect for once call? then if you have update you can add it useEffect deps.

Related