时间戳

首页 > 解决方案 > @apollo/client 反应钩子 useQuery() 数据未定义

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

问题描述

我用反应钩子阿波罗客户端制作了一个片段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，但似乎不起作用。

请问你能帮帮我吗 ？

非常感谢。

标签： javascriptreactjsgraphqlapollo

解决方案

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

推荐阅读