After changing the data source URL, I get an error and cannot retrieve the data.
Nice to meet you.
I have a question that I am unable to resolve.
We are currently starting to create an admin page in our local development environment.
When I changed the API_URL of the dataProvider in the automatically created file, I got the following error.
---
Something went wrong while fetching the resource data.
Please check your data provider and API for resource "products".
For more info, please check the documentation.
---
URL before change
https://api.fake-rest.refine.dev
URL after change
http://localhost:3001
I am trying to display the product list at the following URL, and if you go directly to the URL, you will get the data returned in an array without any problems.
http://localhost:3001/products
The following data is returned.
[{"id":1, "title": "title", "content": "content", "createdAt": "2023-10-10T17:38:13.486Z", "updatedAt": "2023-10-10T17:38:01.454Z"}]
The frontend is created in Next.js
The backend is created in NestJS and the API is provided in a generic CRUD.
If I change the database, do I need to configure anything other than changing the URL?![No description](https://cdn.answeroverflow.com/1161363000628883496/2023-10-11_2.52.33.png)
![No description](https://cdn.answeroverflow.com/1161363000909905940/2023-10-11_2.53.18.png)
![No description](https://cdn.answeroverflow.com/1161363001148969020/2023-10-11_2.53.47.png)
3 Replies
Hi @rin__design_enginner. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided, it seems like you're trying to connect your refine application to a local API endpoint. The error message suggests that there might be an issue with fetching data for the "products" resource from your local API.
Here are a few things you could check:
1. API Endpoint: Ensure that your API endpoint is correct and accessible. You mentioned that
<http://localhost:3001/products
> returns data when accessed directly. This suggests that your API is working correctly.
2. Data Provider: refine uses data providers to communicate with APIs. If you're using a RESTful API, you might be using the simple-rest
data provider. Make sure you've correctly set up the data provider with your API URL in your App.tsx
file. Here's an example of how to do this:
(Source: refine documentation (https://refine.dev/docs/api-reference/core/providers/data-provider/))
3. Resource Configuration: Ensure that the "products" resource is correctly configured in your refine application. You need to specify the resource in the resources
prop of the Refine
component. Here's an example:
(Source: refine blog (https://refine.dev/blog/dynamic-forms-in-react-hook-form/))
4. Data Format: Ensure that your API returns data in a format that refine expects. For a list operation, refine expects an array of records. Each record should be an object with a unique id
field. The data you provided seems to be in the correct format.
5. Nestjsx Crud Data Provider: If you're using NestJS with the generic CRUD module, you might want to consider using the refine Nestjsx Crud Data Provider. This data provider is designed to work with APIs built with Nestjsx CRUD.
(Source: refine documentation (https://refine.dev/docs/examples/data-provider/nestjsxCrud/))
If you've checked all these points and you're still facing issues, there might be a more specific issue with your API or your refine configuration. In that case, you might want to refer to the refine documentation (https://refine.dev/docs) or seek help from the refine community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@555368322577989672> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold•11mo ago
Hello @rin__design_enginner could it be CORS issue? It seems like API doesn't return response correctly to the backend. Please check CORS configuration on API side