Hashnode / starter-kit

A blog starter kit to use Hashnode as a Headless CMS using GraphQL APIs.

Home Page:https://hashnode.com/headless

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

GraphQL CombinedError Issue when loading more articles of a series

giolaq opened this issue · comments

I'm using this starter-kit for my website https://giolaq.dev.
I've got a page https://giolaq.dev/series/talks loading all the articles of a series but when I click "Load More" the older articles are not loading and there's the GraphQL error below:

GQL error occurred 
Object { error: CombinedError }
[talks:13024:25](https://giolaq.dev/series/talks)
    overrideMethod https://giolaq.dev/series/talks:13024
    NextJS 86

The error message you provided seems to be related to GraphQL, specifically with Next.js. The error object indicates a "CombinedError." Here's a general approach to address this issue:

Check GraphQL Queries/Mutations:

Ensure that your GraphQL queries or mutations are correctly formed.
Confirm that the queries or mutations match the schema defined in your GraphQL server.
Inspect the CombinedError Object:

Look into the details of the CombinedError object to understand the specific GraphQL error(s) that occurred.

Log or print the error details to the console for more information:

javascript
Copy code
console.error("GraphQL Error:", error);
Handle Errors in Your Code:

Implement proper error handling in your code to gracefully handle GraphQL errors.

You can use try...catch blocks to catch and handle errors:

javascript
Copy code
try {
// Your GraphQL query or mutation code here
} catch (error) {
console.error("Error occurred:", error);
// Handle the error appropriately (e.g., show a user-friendly message)
}
Check Network Requests:

Ensure that network requests to your GraphQL server are successful.
Check the network tab in your browser's developer tools for any failed GraphQL requests.
Verify Server-Side Rendering (SSR) in Next.js:

If you're using Next.js for server-side rendering, make sure that your GraphQL queries are properly handled on the server side.
Verify that your components or pages with GraphQL queries are wrapped with the withApollo HOC (Higher Order Component) from @apollo/client.
Update Apollo Client:

Ensure that you are using a compatible version of @apollo/client. Check for any updates to the Apollo Client library and upgrade if necessary.
If you provide more specific details about the GraphQL query, the structure of your components/pages, and how you are using Apollo Client with Next.js, I can provide more targeted assistance.

Thanks! I'm just using this starter kit (hashnode theme) pointing to my HashNode.
You can check the deployment here and reproduce the bug while clicking "Load more"
Didn't change any part in the code

The Response to the GraphQL query is this :

{"errors":[{"message":"Variable \"$slug\" of required type \"String!\" was not provided.","locations":[{"line":1,"column":41}],"extensions":{"code":"BAD_USER_INPUT"}}]}

The query is from the code of this repository and the backend is HashNode straight away.

Any suggestion? It could be a bug in this code

This issue has been fixed in this PR: #111

Thank you, I tried with the updated version of the starter kit but I have still this issue

@giolaq Can you provide some additional information to your issue?

  • You are using the hashnode theme, right?
  • What is the actual error (you post only shows { error: CombinedError })? Can you provide the full error?
  • Can you confirm that you have integrated the changes of the linked PR in your code?
  • Is your code maybe publicly available so that I can debug it directly?
  • Did you made any changes yourself in related code?

Hi @JannikWempe thank you!
I'm using hashnode them for my website here giolaq.dev
The code is available in my fork https://github.com/giolaq/starter-kit
Didn't change anything on that code, essentially I cannot retrieve the articles of the series here https://giolaq.dev/series/talks.
When I tap on "Load More" I receive this error

{"errors":[{"message":"Variable \"$slug\" of required type \"String!\" was not provided.","locations":[{"line":1,"column":41}],"extensions":{"code":"BAD_USER_INPUT"}}]}

I have checked out your branch locally and used your domain and everything seems to work just fine.

It looks like the deployment for the fix failed 👇🏼
image

That seems to be related to the type error which will be fixed by #114

Now your deployment should work again and the fix should be deployable.

Thank you!