ApolloProvider useQuery combination does not fetch data from AWS AppSync, in React project

Question

Situation

Due to the compatible issue, I am using ApolloClient to form my AWS AppSync API client, so that I can use ApolloProvider to pass the client to different sub-component.

In the sub-component, I call useQuery to fetch data, but the problem is the output always give me default "undefined" value.

Code in Top Level

import awsconfig from '../aws-exports';
import { AUTH_TYPE } from 'aws-appsync';
import {
  ApolloProvider,
  ApolloClient,
  ApolloLink,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import { createAuthLink } from "aws-appsync-auth-link";
import { getUserDb, listUserDbs } from '../graphql/queries';

const link = ApolloLink.from([
  createAuthLink({
    url: awsconfig.aws_appsync_graphqlEndpoint,
    region: awsconfig.aws_appsync_region,
    auth: {
      type: AUTH_TYPE.API_KEY,
      apiKey: awsconfig.aws_appsync_apiKey,
    },
  }),
  new HttpLink({ uri: awsconfig.aws_appsync_graphqlEndpoint }),
]);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  credentials: 'include'
});

function WithProvider (){
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  )
}

export default WithProvider;

Code in sub-Component (usage of useQuery)

import { listUserDbs } from '../graphql/queries';
const GET_USER_PROFILE = gql(listUserDbs)

function App() {
  const { loading, error, out_data, client } = useQuery(GET_USER_PROFILE);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

What test have I done?

1. when I call query straight from client, it worked

client
  .query({
    query: gql`
      query ListUserDbs(
        $filter: Table
      ) {
        listUserDBS(filter: $filter) {
          items {
            sub
          }
          nextToken
        }
      }
    `
  })
  .then(result => console.log(result));

2. when I ask useQuery to return client, it returns the same client I set up

const { loading, error, out_data, client } = useQuery(LIST_USER_PROFILE);

My guess of the issue

The issue is probably coming from useQuery but I don't know how to solve it.

Answer 1

Maybe you need data instead of out_data?