Nested Endpoint

Hi! How would I go about a useList call to a nested resource, i.e /users/posts?

19 Replies

Hi @avangeous. 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 make a useList call to a nested resource by using the resource property. The resource property is used as the URL for the API request. Here is an example of how you can do it:

import { useList } from "@refinedev/core";  

useList({  
 resource: "/users/posts",  
});

import { useList } from "@refinedev/core";  

useList({  
 resource: "/users/posts",  
});

This will make a request to the URL /users/posts. For more information, you can refer to the FAQ section (https://refine.dev/docs/faq) of the Refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

wise-whiteOP•2y ago

@kapa.ai I had tried that, but the networks tab doesn't show any API call.

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you're not seeing any API calls in the network tab, it could be due to a few reasons: 1. The resource prop might not be correctly set. Ensure that the resource prop is correctly set to the nested route you want to access. For example, if you want to make a request to the URL /users/posts, you should use:

useList({  
 resource: "/users/posts",  
});

useList({  
 resource: "/users/posts",  
});

2. The useList hook might not be used correctly. The useList hook is used to fetch data according to sort, filter, pagination, etc. from a resource. It uses the getList method as the query function from the dataProvider which is passed to <Refine>. Make sure you're using the useList hook correctly as shown in the useList documentation (https://refine.dev/docs/api-reference/core/hooks/data/useList). 3. The dataProvider might not be correctly set up. The useList hook uses the getList method from the dataProvider. If the dataProvider is not correctly set up, the getList method might not work as expected. You can refer to the creating a data provider (https://refine.dev/docs/api-reference/core/providers/data-provider/#creating-a-data-provider) section for more information on how to set up a dataProvider. If you've checked all these and you're still not seeing any API calls, there might be an issue with your setup or configuration. You might want to check your console for any error messages or warnings. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

wise-whiteOP•2y ago

The above was due to the endpoint being a POST instead of a GET. @kapa.ai How would I make a custom POST call?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To make a custom POST call in Refine, you can use the useCustomMutation hook. This hook uses the custom method from the dataProvider which is passed to <Refine>. Here is an example of how you can use the useCustomMutation hook:

import { useCustomMutation } from "@pankod/refine";

const { mutate } = useCustomMutation({
    resource: "posts",
    action: "custom",
});

const handleCustomPost = async () => {
    const { data } = await mutate({
        url: "/custom-url",
        method: "POST",
        payload: { key: "value" },
    });
};

import { useCustomMutation } from "@pankod/refine";

const { mutate } = useCustomMutation({
    resource: "posts",
    action: "custom",
});

const handleCustomPost = async () => {
    const { data } = await mutate({
        url: "/custom-url",
        method: "POST",
        payload: { key: "value" },
    });
};

In this example, mutate is a function that you can call to make the custom POST request. The url, method, and payload parameters are used to specify the URL, HTTP method, and request body of the POST request. You can find more information about the useCustomMutation hook in the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

wise-whiteOP•2y ago

Used useCustom instead @kapa.ai How do I pass body parameters with useCustom?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To pass body parameters with useCustom, you can use the payload property inside the config object. The payload property is used to specify the request body of the API call. Here is an example of how you can use the useCustom hook with body parameters:

import { useCustom, useApiUrl } from "@refinedev/core";  

const { data, isLoading } = useCustom({  
 url: `${apiUrl}/posts-unique-check`,  
 method: "post",  
 config: {  
  payload: {  
   key: "value",  
  },  
 },  
});

import { useCustom, useApiUrl } from "@refinedev/core";  

const { data, isLoading } = useCustom({  
 url: `${apiUrl}/posts-unique-check`,  
 method: "post",  
 config: {  
  payload: {  
   key: "value",  
  },  
 },  
});

In this example, key: "value" is the body parameter that is passed to the API call. You can replace key: "value" with your own body parameters. You can find more information about the useCustom hook in the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

like-gold•2y ago

Hey @avangeous first answer from the bot should do the trick. Can you try passing the resource without a slash at the beginning like users/posts? Network tab will probably show this as a request to posts because they only show the latest partition of the url as title 😅 Let ne know if you have any issues with it

wise-whiteOP•2y ago

useCustom ended up fitting my use case better, but I'll keep it in mind! Thanks 🙂 @kapa.ai I'd like to have a button that calls the useCustom action on click. The way I tried prompts as an invalid hook call. Is this possible?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, it's possible to call a useCustom action on a button click. However, remember that React Hooks must follow the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html), which means they can only be called at the top level of your React function, not inside callbacks or loops. Here's an example of how you can do it:

import { useCustom, Button } from "@refinedev/core";

const MyComponent = () => {
    const { mutate, isLoading } = useCustom({
        url: "/custom-url",
        method: "POST",
    });

    const handleClick = async () => {
        const { data } = await mutate({
            payload: {
                key: "value",
            },
        });
        // handle the response data
    };

    return (
        <Button loading={isLoading} onClick={handleClick}>
            Click me
        </Button>
    );
};

import { useCustom, Button } from "@refinedev/core";

const MyComponent = () => {
    const { mutate, isLoading } = useCustom({
        url: "/custom-url",
        method: "POST",
    });

    const handleClick = async () => {
        const { data } = await mutate({
            payload: {
                key: "value",
            },
        });
        // handle the response data
    };

    return (
        <Button loading={isLoading} onClick={handleClick}>
            Click me
        </Button>
    );
};

In this example, handleClick is the function that will be called when the button is clicked. Inside this function, we call the mutate function returned by useCustom to make the API call. The isLoading prop is used to show a loading indicator on the button while the API call is in progress. You can find more information about the useCustom hook in the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

wise-whiteOP•2y ago

@kapa.ai Property 'mutate' does not exist on type.

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: @avangeous That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

wise-whiteOP•2y ago

😵

other-emerald•2y ago

Hello @avangeous, if you are using simple-rest data provider, this should work simple-rest handles meta.method

const result = useList({
    resource: "/users/posts",
    meta: {
        method: "POST",
    },
});

const result = useList({
    resource: "/users/posts",
    meta: {
        method: "POST",
    },
});

Nested Endpoint

Did you find this page helpful?