@apollo/client react hook useQuery() 数据未定义

如何解决@apollo/client react hook useQuery() 数据未定义

我用 react hook apollo 客户端制作了一个片段 gql，在网络中请求没问题，但在 react 中没有获取数据......为什么？谢谢。

我的 GQL 和 useQuery :

    import gql from "graphql-tag";
    import {useQuery} from "@apollo/client";

    const AuthorFragment = {
        entry: gql`
        fragment AuthorFragment on Author {
         ... on User {
           id
         profile {
             pseudo
               picture
               __typename
             }
             __typename
           }
           ... on Guest {
               username
             picture
             __typename
           }
           __typename
     
        }`,};

    const MESSAGE_QUERY   = gql`
        query adminMessageSearch($offset: Int,$limit: Int) {
         website {
           id
           adminMessageSearch (object: "comments",offset: $offset,limit: $limit) {
             Meta {
               count
               offset
               limit
              },messages {
                id
                content
               contentEditedAt
                createdAt
                status
                ip
                thread {
                  id
                  url
                  pageTitle
                }
                Votes {
                  score
                }
                author {
                  ...AuthorFragment
                }
           
             }
             
           }
         }
       }
       ${AuthorFragment.entry}
    `;

    export const useMessageQuery = (offset,limit) => useQuery(MESSAGE_QUERY,{
        variables: {
            offset: offset|| 0,limit: limit || 10,},fetchPolicy: "network-only" });

我的反应：

import React,{ useState  } from 'react'
import {useMessageQuery} from "../../graphql/queries/messageQuery";
import Message from "./Message";


export const ListingMessage = () => {

    const {loading,error,data} = useMessageQuery(0,10);
    if(loading) return 'Loading...';
    if(error) return `Error! ${error.message}`;

    return (
        <div className="list-disc ">
            <p  > total:  {data.website.adminMessageSearch.Meta.count}
                    <br/>
            </p>
       </div> 
    )

}
export default ListingMessage;

数据未定义，但我在网络中看到的请求graphql是可以的。我试图异步 => 等待我的代码 useMessageQuery，但似乎不起作用。

你能帮我吗？

非常感谢。

解决方法

您的查询名称是 adminMessageSearch，因此您可以使用 data.adminMessageSearch 访问它，因为您正在使用 data.website.adminMessageSearch.meta.count 没有 data.website 会导致未定义。所以修改

return (
        <div className="list-disc ">
            <p  > total:  {data.adminMessageSearch.website.adminMessageSearch.meta.count}
                    <br/>
            </p>
       </div> 
    )