I have a very simple react native setup which I am trying to connect to a Graphql server through Apollo.
This is what the only file I modified (after CRNA), looks like:
App.tsx
import React from 'react';import { StyleSheet, ScrollView, Text, FlatList } from 'react-native';import { ApolloProvider, useQuery } from '@apollo/client';import client from './apollo';import gql from 'graphql-tag';export const FETCH_TODOS = gql`query { todos ( order_by: { created_at: desc }, where: { is_public: { _eq: false} } ) { id title is_completed created_at is_public user { name } }}`;const App: () => React.ReactNode = () => { const { data, error, loading } = useQuery( FETCH_TODOS, ); return (<ApolloProvider client={client}><ScrollView style={styles.scrollView}><FlatList data={data.todos} renderItem={({ item }: any) => <Text>{item}</Text>} keyExtractor={(item) => item.id.toString()} /></ScrollView></ApolloProvider> );};const styles = StyleSheet.create({ scrollView: { backgroundColor: "white", }});export default App;
The makeApolloClient file is this:
apollo.ts
import { ApolloClient, InMemoryCache, NormalizedCacheObject, createHttpLink} from '@apollo/client'function makeApolloClient({ token }: any): ApolloClient<NormalizedCacheObject> { // create an apollo link instance, a network interface for apollo client const link = createHttpLink({ uri: `https://hasura.io/learn/graphql`, headers: { Authorization: `Bearer ${token}` } }); const cache = new InMemoryCache() const client = new ApolloClient({ link: link as any, cache }); return client;}const client = makeApolloClient({ token: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik9FWTJSVGM1UlVOR05qSXhSRUV5TURJNFFUWXdNekZETWtReU1EQXdSVUV4UVVRM05EazFNQSJ9" });export default client;
On running npx react-native run-android
, this is the error I get:
Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.
Can't figure out what the issue is, since I've already wrapped the only component I have with ApolloProvider.