@apollo/client react hook useQuery() data undefined

Question

我用react hook apollo客户端制作了一个片段gql，在网络中请求是可以的，但数据没有在react中获取…为什么?谢谢。

my GQL and usquery:

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;

数据未定义，但我在网络中看到的请求图是ok的。我试着async =>等待我的代码使用emessagequery，但似乎不工作。

你能帮我一下吗?

谢谢你。

Answer 1

您的查询名称是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> 
)