ambitious-aqua•9mo ago

We are trying to configure the way an error from the GraphQL resolver is handled in the refine.

We are sending the request using useCreate hook from refinedev/core and the Apollo Server is throwing an INTERNAL_SERVER_ERROR. Whenever Refine, receives this response, it automatically triggers a notification with the raw request in the body like the one here below. Current Output

Duplicate barcode: {"response":{"errors":[{"message":"Duplicate barcode","locations":null,"path":null,"extensions":null}],"data":{"createProduct":null},"status":200,"headers":{"map":{"content-length":"122","content-type":"application/json; charset=utf-8"}}},"request":{"query":"mutation ($input: createProductInput) {\n createProduct (input: $input) {\n id, error, productName, status, barcode, brand, upc, image\n }\n}","variables":{"input":{"data":{"status":"active","productName":"Name","barcode":"177","brand":"some brand","upc":"upc"}}}}}

There was an error creating Product (status code: undefined)

Duplicate barcode: {"response":{"errors":[{"message":"Duplicate barcode","locations":null,"path":null,"extensions":null}],"data":{"createProduct":null},"status":200,"headers":{"map":{"content-length":"122","content-type":"application/json; charset=utf-8"}}},"request":{"query":"mutation ($input: createProductInput) {\n createProduct (input: $input) {\n id, error, productName, status, barcode, brand, upc, image\n }\n}","variables":{"input":{"data":{"status":"active","productName":"Name","barcode":"177","brand":"some brand","upc":"upc"}}}}}

There was an error creating Product (status code: undefined)

Expected output should be something like Error: Duplicate barcode Any help would be very much appreciated here.

5 Replies

kapa.ai•9mo ago

Hi @z3t4z00k. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can customize the error notification that shows up when the data fetching fails using the errorNotification prop in the useCreate hook. This prop allows you to return a custom error message based on the response data. Here is an example of how you can use the errorNotification prop to customize the error message:

const { mutate } = useCreate();  
  
mutate({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: data.response.errors[0].message,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

const { mutate } = useCreate();  
  
mutate({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: data.response.errors[0].message,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

In this example, data.response.errors[0].message should be the error message returned by your Apollo Server. This will replace the default error message with the custom one you specified. Please note that the NotificationProvider is required for this prop to work. You can find more information about this in the refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/#errornotification). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@360245125504434177> kapa.ai is still learning and improving, please let us know how it did by reacting below

vicious-gold•9mo ago

Hello @z3t4z00k, due to nature of GraphQL responses and their errors, unfortunately, we don't have a unified handling of error messages yet. However, you can swizzle your data provider and modify it to return error object compatible with our notification handler: https://refine.dev/docs/tutorial/understanding-dataprovider/swizzle/ https://refine.dev/docs/api-reference/core/providers/data-provider/#error-format

2. Create a data provider with swizzle | refine

What is swizzle?

Data Provider | refine

Data provider acts as a data layer for your app, making HTTP requests and encapsulating how the data is retrieved. The methods of these requests are then consumed by refine via data hooks.

ambitious-aqua•9mo ago

@batuhanw, the answer by @kapa.ai worked perfectly for our use case. No config or extra code needed. Thanks for the help anyways 🙂

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @z3t4z00k, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?