未处理的运行时错误:无法读取null的属性(读取“myQuery”)

我正在运行我的项目,但不幸的是,我遇到了一个错误。我附上这些页,将帮助你帮我解决这个错误。

我在下面分享的页面如下:-

1. 获取新闻.ts
2. index.graphql
3. 第.tsx页

我收到以下错误:

下面是我的获取新闻.ts

import sortNewsByImage from "./sortNewsByImage";

const fetchNews = async(
    category?: Category | string,
    keywords?: string,
    isDynamic?: boolean
) => {
    const query = gql`
        query MyQuery(
            $access_key: String!
            $categories: String!
            $keywords: String
        ) {
            myQuery(
                access_key: $access_key
                categories: $categories
                keywords: $keywords
            ) {
                data{
                    author
                    category
                    image
                    description
                    country
                    language
                    published_at
                    source
                    title
                    url
                }
                pagination{
                    count
                    limit
                    offset
                    total
                }
            }
        }`


    const res = await fetch('https://saintalbanleysse.stepzen.net/api/juiced-waterbuffalo/__graphql', {
        method: 'POST',
        cache: isDynamic ? "no-cache" : "default",
        next: isDynamic ? { revalidate: 0} : { revalidate: 20 },
        headers: {
            "Content-Type": "application/json",
            Authorization: `Apikey ${process.env.STEPZEN_API_KEY}`,
        },
        body: JSON.stringify({
            query,
            variables: {
                access_key: process.env.MEDIASTACK_API_KEY,
                categories: category,
                keywords: keywords,
            },
        }),
    })

    console.log(
        "LOADING NEW DATA FROM API for category >>> ",
        category,
        keywords
    )
    const newsResponse = await res.json();
    const news = sortNewsByImage(newsResponse.data.myQuery);
    return news;


};

export default fetchNews;

此外,我的index.graphql:

type DataEntry {
  author: String
  category: String
  country: String
  description: String
  image: String
  language: String
  published_at: DateTime
  source: String
  title: String
  url: String
}

type Pagination {
  count: Int
  limit: Int
  offset: Int
  total: Int
}

type Root {
  data: [DataEntry]
  pagination: Pagination
}

type Query {
  myQuery(
    access_key: String
    categories: String
    keywords: String
  ): Root
    @rest(endpoint: "http://api.mediastack.com/v1/news")
}

此外,共享我的页面.tsx:

import fetchNews from "@/lib/fetchNews";
import { categories } from "../constants";

async function Homepage(){
  //fetch the news data
  const news: NewsResponse = await fetchNews(categories.join(','))

  console.log(news)


  return <div>
    {/* NewsList news*/}
  </div>
}

export default Homepage;