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.
See original GitHub issueIntended outcome:
I was hoping to connect with the Hasura server using Apollo Actual outcome:
Got the error response:
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.
How to reproduce the issue:
I have a very simple setup.
- Followed the react native setup for Typescript from : https://reactnative.dev/docs/typescript
- Modified
App.tsx
to:
import React from 'react';
import { StyleSheet, ScrollView, Text, FlatList } from 'react-native';
import { ApolloProvider, ApolloClient, useQuery } from '@apollo/client';
import makeApolloClient from './apollo';
import gql from 'graphql-tag';
// import { useQuery } from '@apollo/react-hooks';
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 = () => {
let [client, setClient] = React.useState({} as ApolloClient<any>);
client = makeApolloClient("eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik9FWTJSVGM1UlVOR05qSXhSRUV5TURJNFFUWXdNekZETWtReU1EQXdSVUV4UVVRM05EazFNQSJ9");
setClient(client);
const { data, error, loading } = useQuery(
FETCH_TODOS,
);
return (
<ApolloProvider client={client}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<FlatList
data={data.todos}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item) => item.id.toString()}
/>
</ScrollView>
</ApolloProvider>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: "white",
}
});
export default App;
- Apollo function import from
apollo.ts
:
import {
ApolloClient,
InMemoryCache,
NormalizedCacheObject,
createHttpLink
} from '@apollo/client'
export 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}`
}
});
// create an inmemory cache instance for caching graphql data
const cache = new InMemoryCache()
// instantiate apollo client with apollo link instance and cache instance
const client = new ApolloClient({
link: link as any,
cache
});
return client;
}
export default makeApolloClient;
- ran
npx react-native run-android
.
Versions
System:
OS: Windows 10 10.0.19042
Binaries:
Node: 12.18.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 86.0.4240.111
Edge: Spartan (44.19041.423.0), Chromium (86.0.622.51), ChromiumDev (88.0.673.0)
npmPackages:
@apollo/client: 3.2.0 => 3.2.0
I actually downgraded @apollo/client from 3.2.4 to test this. Both of the versions did not work.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:8
- Comments:24 (2 by maintainers)
Top Results From Across the Web
React Apollo Error: Invariant Violation: Could not find " ...
Wrap the root component in an , or pass an ApolloClient instance in via options. If I downgrade the react-apollo package to 2.5.8...
Read more >Apollo and Graphql Help: "Could not find "client" in the ...
"Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or...
Read more >Demostrating error "Invariant Violation
Demostrating error "Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>".
Read more >React Testing Library Configuration for Productive Unit ...
Invariant Violation : Could not find “client” in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, ......
Read more >Testing React components - Apollo GraphQL Docs
In order to fix this we could wrap the component in an ApolloProvider and pass an instance of Apollo Client to the client...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@karansinghgit Ahh, I think the problem is that you’re calling
useQuery
before you’ve created your<ApolloProvider client={client}/>
component, souseQuery
can’t find anyApolloProvider
above it in the component tree, and thus can’t find theclient
. I think you might want to move the client creation andApolloProvider
wrapping code out of yourApp
component, so theApp
component can safely calluseQuery
. If that’s not an option, you can move theuseQuery
code down into a nested component that’s rendered inside the<ApolloProvider/>
component.After long hours i figured out this nonesense https://github.com/apollographql/apollo-client/issues/7112#issuecomment-702884623 works. This project starting to become ridiculous. @apollo/client@^3.4.0-beta.20