query works with useQuery hook but not with ApolloClient instance - apollo

Question

I'm running into an issue where running a query with the useQuery Apollo hook works fine, but if I use the useApolloClient hook to get the instance of ApolloClient and then call the client's query method, the call fails with the error Error: query option is required. You must specify your GraphQL document in the query option.
My code more or less looks like this:
import React from 'react'
import gql from 'graphql-tag'
import { useQuery, useApolloClient } from '#apollo/react-hooks'
const MyComponent = props => {
const QUERY = gql`
query MyPersonSearch ( $after: String, $filter: PersonFilter, $first: Int ) {
people: people ( after: $after, filter: $filter, first: $first ) {
totalCount
pageInfo {
endCursor
hasNextPage
}
edges {
node {
firstName
lastName
}
}
}
}
`
const queryVars = cursor => { after: cursor, ...otherQueryVars }
// This works
const { loading, error, data, fetchMore } = useQuery(
QUERY, { variables: queryVars( ... ) }
)
// This doesn't work
const client = useApolloClient()
const fetchPages = async () => {
const { data } = await client.query( QUERY, { variables: queryVars( ... ) } )
}
...
}
Any idea what's going on here? The error message is a little vague, but I'm assuming it means that client.query() expects a DocumentNode as its first parameter, and the return type of gql is any...but then again, if this were true, I would expect useQuery to fail too, since it also expects the query to be a DocumentNode.

Answer 1

Welp, turns out the syntax is not the same. client.query() expects a sole QueryOptions parameter, whereas useQuery can take the query as the first parameter, and an optional QueryOptions second parameter.