[BUG] @refinedev/graphql Error Handling does not work as it should

[sudeepjd-cyient]

Describe the bug

Refine's GraphQL package is loosely based on nestjs-query. However, uses urql under the hood. urql uses 2 different types of error handling mechanisms, an errorExchange in exchanges or response.error on the result. The way refine is built using Tanstack query it is expecting an exception new Error to be thrown in order to be caught and treated as an error. But urql does not do this out of the box, and so refine always treats any error as a success, which impact the notifications provider.

Steps To Reproduce

Create a new project using the GraphQL dataProvider with the below dataProvider.tsx file

My apologies for the badly formatted codeblock below. Could not get markdown to work correctly.

---

import { Client, OperationResult, fetchExchange, errorExchange } from "urql";
import createDataProvider from "@refinedev/graphql";
export const API_BASE_URL = "http://localhost:5000";
export const API_URL = ${API_BASE_URL}/graphql;

// This is the global error handling process
const customErrorExchange = errorExchange({
onError: (error) => {
let errorMsg = "";

if (error.networkError) {
  errorMsg = "Network error: Please check your internet connection.";
}

if (error.graphQLErrors) {
  // Create a combined message for all GraphQL errors
  const message = error.graphQLErrors
    .map(({ message }) => message)
    .join(", ");
  errorMsg = message;
}

console.log(errorMsg);
throw new Error(errorMsg); //this does not work
throw Promise.reject(new Error(errorMsg)); //this does not work as it says Uncaught in Promise

},
});

export const client = new Client({
url: API_URL,
exchanges: [customErrorExchange, fetchExchange]
});

export const dataProvider = createDataProvider(client);

---

All of the error handling above gives an Uncaught (in promise)

Expected behavior

Since refine is using urql, the way that it should behave would be to catch the error in the @refinedev/graphql dataprovider class and throw the error there, like it does at

refine/packages/graphql/src/dataProvider/index.ts

Line 20 in 961e1fe

throw new Error("Operation is required.");

urql provides this error back so it is easy to catch and rethrow by adding in a handler function as below

---

const errorHandler = (error : CombinedError | undefined): string => {
let errorMsg = "";

if (error?.networkError) errorMsg = "error.networkerror";

if (error?.graphQLErrors) {
const message = error.graphQLErrors
.map(({ message }) => message)
.join(", ");
errorMsg = message;
}

return errorMsg
}

---

And then after we get the response at line

refine/packages/graphql/src/dataProvider/index.ts

Line 23 in 961e1fe

const response = await client

or any other line where the error could come back from the server.
Add in

if (response.error) throw new Error(errorHandler(response.error));

Packages

@refinedev/graphql
Using refine without a UI package as I am using shadcn's ui components.

Additional Context

I also see that on the Documentation for GraphQL on the Authentication section

https://refine.dev/docs/data/packages/graphql/#authentication

The codeblock refers to GraphQLClient which no longer exists in the @refinedev/graphql package and the code block needs to be updated to use urql as shown in the top section of the document.

I would love to support in resolving this issue, but I am not very good at putting together fixes or PR's on github, my apologies. Support for another community member for a fix would be highly appreciated. Thanks.

[BatuhanW]

Hey @sudeepjd-cyient, really appreciate the detailed issue and providing a great context!

If you would like to work on this issue, we'd be more than happy to help you through. You can check our contribution guide here. If you can't, I'll try to spare some time until the next release.

[sudeepjd-cyient]

Thank you will try and work on this issue and will reach out here if I need help with it. The guide is pretty detailed, so will follow it.