Unhandled Runtime Error Error: Cannot read properties of null (reading 'myQuery')

[PranaySadani]

const newsResponse = await res.json();
56 | let news = newsResponse;

57 | if (newsResponse.data.myQuery !== null) {
| ^
58 | news = sortNewsByImage(newsResponse.data.myQuery)
59 | }

showing error in this(fetchNews.ts)

[dhawal-793]

const newsResponse = await res.json(); 56 | let news = newsResponse;

57 | if (newsResponse.data.myQuery !== null) {
| ^
58 | news = sortNewsByImage(newsResponse.data.myQuery)
59 | }

showing error in this(fetchNews.ts)

Can you explain when and where this error is occuring

[dhawal-793]

This error can occur for many reasons, some are:

• API limit exceeded.
• API doesn't have permission to do an operation.
• The search query is invalid.

I have added error handling in the Latest Pull Request #112.
While you are developing you will get an error but in Production you will not see any error.

[sylarion]

const newsResponse = await res.json(); 56 | let news = newsResponse;

57 | if (newsResponse.data.myQuery !== null) {
| ^
58 | news = sortNewsByImage(newsResponse.data.myQuery)
59 | }

showing error in this(fetchNews.ts)

Try this solution:
'use client'
import Article from "./Article"
import GridLayout from "./Layouts/GridLayout"

type Props = {
news: NewsResponse
}

const NewsList = ({ news }: Props) => {
return (

{
Array.isArray(news.data) && news.data.map(article => (

))
}

)
}

export default NewsList

// import Article from "./Article"
// import { dummyNews } from "@/dummyNewsData";
// import ArticleLoader from "./loaders/ArticleLoader";
// import fetchNews from "@/lib/fetchNews";

// export default async function NewsList () {

// // const news: NewsResponse = dummyNews;
// const news: NewsResponse =await fetchNews();
// // console.log("News Data=>", news);
// return (
//

// {news.data.map(article => {
// return (
// //
//
// )
// })}
//
// )
// }