@apollo/client 反应钩子 useQuery() 数据未定义

Posted 2023-03-08

【中文标题】@apollo/client 反应钩子 useQuery() 数据未定义

【英文标题】：@apollo/client react hook useQuery() data undefined

【发布时间】：2021-05-31 05:56:38

【问题描述】：

我用反应钩子阿波罗客户端制作了一个片段gql，在网络中请求正常，但反应中没有获取数据......为什么？谢谢。

我的 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，但似乎不起作用。

你能帮帮我吗？

非常感谢。

【问题讨论】：

查看***.com/questions/11149144/…

检查这个答案 Google maps get latitude and longitude having city name?

你的钩子有返回什么吗？

是的，数据挂钩返回任何东西...但是在网络中查看 chrome graphql 结果...

从entry: gql中删除gql

【参考方案1】：

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

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

【讨论】：

您好，数据未定义，因此 data.website（未定义）或 data.adminMessageSearch（也未定义）。

console.log(data) 有什么回报吗？

是的，数据返回任何东西，但是当我删除片段 gql 时，数据返回信息......为什么？我的片段有问题？