在 React 項目中，ApolloProvider useQuery 組合不從 AWS AppSync 獲取數據

Question

情況

由於兼容問題，我使用 ApolloClient 來構建我的 AWS AppSync API 客戶端，這樣我就可以使用 ApolloProvider 將客戶端傳遞給不同的子組件。

在子組件中，我調用 useQuery 來獲取數據，但問題是 output 總是給我默認的“未定義”值。

頂層代碼

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;

子組件中的代碼（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>;

我做了什么測試？

1. 當我直接從客戶端調用查詢時，它有效

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

2. 當我要求 useQuery 返回客戶端時，它返回我設置的同一個客戶端

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

我對問題的猜測

問題可能來自 useQuery 但我不知道如何解決。

Answer 1

也許您需要data而不是out_data ？