UseQuery requires client which is declared

Help
,
1

Hello team,

My problem seems confusing. Im using Apollo with Nextjs with Keystone CMS, which has Graphql as API.

Now I have declared the apollo-client in a separate js file, in my main js file i imported useQuery and gql from @apollo/client.

When i declare {loading, error, data} = useQuery(QUERY_POSTS) i get an error that i need to pass client as options or wrap my component between an ApolloProvider tag, which i did and added client={client} as required option, but i still get this error. When i used with my mounted component it was working. My query doesnt require any variables.

Can someon point me as what im doing wrong here, please?

2

added client={client} as required option

What do you mean by this?

1 Like
3

I mean as it stated in the tutorial, i wrote <ApolloProvider client={client}>{HERE COMES MY COMPONENT}</ApolloProvider>

4

When i used with my mounted component it was working

I’m a bit confused about this part as well. Are you implying that you’re no longer using a react component that gets mounted? Could you post more information about your setup?

1 Like
5

So, i’m working on a login/register option, where the components, login and register respectively where working fine inside the <ApolloProvider client={client}><ApolloProvider/> tag, but when I added a new component where I wanted to fetch posts from Keystonejs CMS(uses GraphQL API), and wrote the code for the useQuery hook, it repetitively showed the error that I should put the GetPosts componenet inside the ApolloProvider tag, which I did, just like the login/register components. Bt it failed continuously.

And i dont see what i’m doing wrong. Have I missed something from the tutorial on the official Docs site perhaps when using useQuery hook?

Alos, what does the useQuery hook return and object of elements or an array fo elements, because i wrote this const {loading, error, data} = useQuery(QUERY_POSTS); and const {content, document, type, children, text} = data?.posts || {}

Maybe I am missing something important when writing and using useQuery.

6

@Dylan_Wulf I have been enlightened by something, that I wans’t using a separate component for ApolloProvider tag. So, if I unserstand it correctly i should write a new component file for this to work, right?

7

Sorry I still don’t have enough information to help you out here. Could you post more of your code?

1 Like
8

I just read the docs again, and I have been amking an obvious mistake, I needed to write the GetPosts query in a new componenet, which I have wrap by the ApolloProvider tag. This is what I’haven’t been doing, I will create a new component fro GetPosts and put it inside that tag and i guess it will work. hurray!

1 Like
9

Thanks for your time @Dylan_Wulf

1 Like