Refine•2y ago

useDataGrid using resource name

Hello, it's been a little while since I've used refine. I'm trying to add a new resource in my refine project.

                {
                  name: "upcomingChangesPoc",
                  list: "/upcoming-changes-poc",
                  meta: {
                    label: "Upcoming Changes POC",
                  },
                },

                {
                  name: "upcomingChangesPoc",
                  list: "/upcoming-changes-poc",
                  meta: {
                    label: "Upcoming Changes POC",
                  },
                },

I have my route:

                  <Route path="/upcoming-changes-poc">
                    <Route index element={<UpcomingChangesList />} />
                  </Route>

                  <Route path="/upcoming-changes-poc">
                    <Route index element={<UpcomingChangesList />} />
                  </Route>

and in my UpcomingChangesList I am using useDataGrid:

export const UpcomingChangesList: React.FC<IResourceComponentsProps> = () => {

  const { dataGridProps } = useDataGrid();

export const UpcomingChangesList: React.FC<IResourceComponentsProps> = () => {

  const { dataGridProps } = useDataGrid();

but when I'm on my page (from my route) the api request is using the resource name, not the list api url?

I feel like I'm missing something simple here but please help me out!

"@refinedev/cli": "^2.5.5",
"@refinedev/core": "^4.20.0",
"@refinedev/inferencer": "^4.1.2",
"@refinedev/kbar": "^1.0.0",
"@refinedev/mui": "^5.1.0",
"@refinedev/react-hook-form": "^4.4.0",
"@refinedev/react-router-v6": "^4.3.2",
"@refinedev/simple-rest": "^4.5.0",

kapa.ai•5/13/24, 10:19 PM

Hi @darshan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•5/13/24, 10:19 PM

----------------------
In refine, the

useDataGrid

useDataGrid

hook uses the

resource

resource

prop to determine the API endpoint for fetching data. By default, it infers the

resource

resource

from the current route. However, if you want to specify a different endpoint, you can pass it directly to the

useDataGrid

useDataGrid

hook.

Here's how you can do it:

In this case, "upcoming-changes-poc" should be the API endpoint path. The

resource

resource

prop is usually used as an API endpoint path and it all depends on how to handle the

resource

resource

in the method.

If you have multiple resources with the same name, you can pass the

identifier

identifier

instead of the

name

name

of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the

name

name

of the resource defined in the component.

For more information, refer to the documentation (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#resource).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/13/24, 10:19 PM

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

efficient-indigoOP•5/13/24, 10:29 PM

based on my path:

Shouldn't the API endpoint infer 'upcoming-changes-poc' from my URL? (localhost:3000/upcoming-changes-poc?pageSize=25&current=1)

Is there a reason why it's not inferring correctly here? Or am I missing something

efficient-indigoOP•5/13/24, 10:30 PM

@kapa.ai based on my path:
<Route path="/upcoming-changes-poc">
<Route index element={<UpcomingChangesList />} />
</Route>

Shouldn't the API endpoint infer 'upcoming-changes-poc' from my URL? (localhost:3000/upcoming-changes-poc?pageSize=25&current=1)

Is there a reason why it's not inferring correctly here? Or am I missing something

kapa.ai•5/13/24, 10:30 PM

Let me check the knowledge base for you. One moment!

kapa.ai•5/13/24, 10:30 PM

----------------------
The

useDataGrid

useDataGrid

hook in refine indeed infers the

resource

resource

from the current route by default. However, there could be a few reasons why it might not be working as expected in your case:

Route Configuration: Ensure that your route configuration is correct and the component is being rendered when you navigate to the "/upcoming-changes-poc" route.
Resource Definition: Make sure that the resource "upcomingChangesPoc" is correctly defined in your
```
<Refine>
```
```
<Refine>
```
component's
```
resources
```
```
resources
```
prop.
Data Provider: The data provider you're using should correctly handle the
```
resource
```
```
resource
```
argument in its method. The
```
resource
```
```
resource
```
argument is used to construct the API endpoint URL.

If you've checked all of these and it's still not working, it might be a bug. In that case, you should consider creating an issue in the refine GitHub repository (https://github.com/refinedev/refine/issues).

For more information on how to use the

useDataGrid

useDataGrid

hook, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/13/24, 10:30 PM

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

efficient-indigoOP•5/13/24, 10:34 PM

@kapa.ai

The correct component is being rendered
As mentioned before in my resource prop I have this:
I'm using the default Data Provider provided by refine, not a custom one

kapa.ai•5/13/24, 10:34 PM

Let me check the knowledge base for you. One moment!

kapa.ai•5/13/24, 10:34 PM

----------------------
Based on the information you've provided, your setup seems correct. The

useDataGrid

useDataGrid

hook should infer the

resource

resource

from the current route, which in your case is "upcoming-changes-poc".

However, it's important to note that the

list

list

property in the

resources

resources

prop of the

<Refine>

<Refine>

component doesn't affect the API endpoint. It's used to define the route for the list page of the resource. The

name

name

property is used to construct the API endpoint URL.

If you're still facing issues, it might be a bug. In that case, I recommend creating an issue in the refine GitHub repository (https://github.com/refinedev/refine/issues) with a detailed description of your problem and the relevant code snippets. The maintainers of the library should be able to help you out.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/13/24, 10:34 PM

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

efficient-indigoOP•5/13/24, 10:45 PM

@kapa.ai When navigating using the sidebar, when does the list page come into play?
In my case, the sidebar would have "Upcoming Changes POC" and I would click it and get sent to my route as I mentioned above. What distinguishes a page as a list page or not?

kapa.ai•5/13/24, 10:45 PM

Let me check the knowledge base for you. One moment!

kapa.ai•5/13/24, 10:45 PM

----------------------
In refine, a list page is typically the page that displays a list of records for a specific resource. It's usually the page you see when you click on a resource in the sidebar.

The

list

list

property in the

resources

resources

prop of the

<Refine>

<Refine>

component is used to define the route for the list page of the resource. When you click on a resource in the sidebar, you're navigated to this route.

Here's an example of how you might define a resource:

In this case, "/upcoming-changes-poc" is the route for the list page of the "upcomingChangesPoc" resource. When you click on "Upcoming Changes POC" in the sidebar, you're navigated to this route.

The component that's rendered when you navigate to this route is responsible for displaying the list of records. You can use the

useDataGrid

useDataGrid

hook in this component to fetch and display the data.

Here's an example:

In this case, is the list page for the "upcomingChangesPoc" resource.

For more information, you can refer to the refine documentation (https://refine.dev/docs/getting-started/overview).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/13/24, 10:45 PM

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

efficient-indigoOP•5/13/24, 10:48 PM

@kapa.ai right, so in this case I should not have to define 'resources' in my useDataGrid call. And the list API url is not being used correctly

kapa.ai•5/13/24, 10:48 PM

Let me check the knowledge base for you. One moment!

kapa.ai•5/13/24, 10:48 PM

----------------------
Yes, you're correct. If you've defined the

resource

resource

in the

<Refine>

<Refine>

component's

resources

resources

prop and you're using the

useDataGrid

useDataGrid

hook in the component that's rendered for the resource's list route, you don't need to pass the

resource

resource

prop to the

useDataGrid

useDataGrid

hook. It should automatically infer the

resource

resource

from the current route.

Here's how you can use the

useDataGrid

useDataGrid

hook in your list component:

If the API endpoint is not being constructed correctly, it might be due to how the method in your data provider is implemented. The method receives the

resource

resource

as an argument and should use it to construct the API endpoint URL.

If you're using the default data provider provided by refine and it's not working as expected, it might be a bug. In that case, I recommend creating an issue in the refine GitHub repository (https://github.com/refinedev/refine/issues) with a detailed description of your problem and the relevant code snippets.

For more information, you can refer to the refine documentation (https://refine.dev/docs/getting-started/overview).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/13/24, 10:48 PM

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