Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6313

Invariant Violation: Could not find "client" in the context or passed in as an option

$
0
0

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.


Viewing all articles
Browse latest Browse all 6313

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>