Setting up the Apollo client according to the documentation, I have configured the ApolloProvider to enable the use of useQuery in nested components. Running queries using the provided apolloClient within the ApolloProvider works without any issues. However, further down the component hierarchy, a similar setup is not yielding the expected results.
export default function SomeScreen({ route }: RouteProps) {
...
let query: DocumentNode;
switch (route.params.someParam) {
case 'A':
query = someQuery1;
break;
...
default:
query = someQueryX;
}
const {loading, error, data} = useQuery<{myData: SomeType[]}, QueryArgTypes>(
query,
{variables}, //assigned elsewhere but they're constant
);
if (loading) return <Text>Loading</Text>
if (error) return <Text>Error</Text>
return (
<FlatList
data={data?.myData}
renderItem={({ item }) => (<SomeComp elem={item} />)}
keyExtractor={(item) => (
item._id!.toString()
)}
/>
);
}
The issue arises when the if (loading) condition always evaluates to true. Even with breakpoints set within the apolloClient.query() execution, the query does not seem to reach the backend at all. The URI used during the apolloClient instantiation belongs to the project itself, ruling out external conflicts. Despite troubleshooting, it appears that the useQuery hook fails to execute the query successfully.
If anyone has encountered a similar problem or has insights into potential solutions, your input would be greatly appreciated. Notable dependencies include:
"react": "17.0.1",
"react-native": "0.64.3",
"@apollo/client": "^3.6.2",