sensitive-blue•2y ago

Action-based (RPC-like) interactions

Hi! I'm pretty new in the whole stack, so probably the question is noobish. I must implement a mix of data-centric and "command/action" views. Some pages are relevant to entities ("resources") some are not. E.g., cases: 1) I have a resource called "plate", I want to call "cleanPlate" on the server side. 2) I have a server-side method that is not relevant to any resource (e.g., "putHouseOnFire") I probably could implement this with "direct" calls to the back end, but it does not sound right, assuming we have a facility to communicate with the back end. From another hand, dataProvider is to provide data, not to initiate actions. The initial idea was to add resources with only names and custom calls e.g. in the <Refine> resources section: { name: "put_house_on_fire", custom: "/put-house-on-fire", } But it is not correct. What would be the proper way to handle things like this?

8 Replies

kapa.ai•2y ago

Hey @artem__m! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation for more information on how to work with resources and data providers: Refine Documentation (https://refine.dev/docs). ----------------------

kapa.ai•2y ago

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

deep-jade•2y ago

It is possible to customize resources with meta. You can use label and route. https://refine.dev/docs/api-reference/core/components/refine-config/#meta But before that, I suggest you review the tutorial. https://refine.dev/docs/tutorial/introduction/index/

sensitive-blue•2y ago

Thanks @yildirayunlu ! I think I got the direction. Maybe I missed something, but it does not seem tutuorial puts much attention on such cases. It is mostly oriented on CRUD, and that is not exactly the same. I will recheck though. In case someone "stuck" with the same issue, https://github.com/refinedev/real-world-example favArticle method is an example of case 1 ("cleanPlate" when custom back-end functionality should be applied to the entity) and probably just using meta as suggested above is way to go for case 2 "putHouseOnFire".

rival-black•2y ago

Is it possible that this is the answer to my question as well, Can I use meta to call Supabase RPCs?: https://discord.com/channels/837692625737613362/1019920511968489512/threads/1088112289649012847

Discord

Discord - A New Way to Chat with Friends & Communities

Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.

Omer•2y ago

You can use RPC anywhere in your application using the 'supabaseClient'.

rival-black•2y ago

How do I bring the one into context that is authenticated?

sensitive-blue•14mo ago

I'm not sure if it is relevant but will leave (simple/ugly) solution I ended up with maybe for someone it is still actual. It also makes sure that auth token is sent @hortinstein (the ugliest part, you at least should centralize adding authorization headers)

export const useExecUpdateCustomMutation = ({useMutateFunc, actionName, runPanelSettings, additional_params}: {
    useMutateFunc: any,
    actionName: string,
    runPanelSettings: IRunPanelSettings,
    additional_params: string | null | undefined,
}) => {
    useMutateFunc({
        url: `http://localhost:8990/api/actions/`,
        method: "post",
        config: {
            headers: {
                "Authorization": "Bearer " + nookies.get()["token"],
            },
        },
        values: {action: actionName, runner_params: runPanelSettings, additional_params: additional_params}
    }, {
        onSuccess: (data: {
            data: { state: React.SetStateAction<string>; };
        }, variables: any, context: any) => {
            console.debug("Received response for action: " + JSON.stringify(data))
        },
    });
}

export const useExecUpdateCustomMutation = ({useMutateFunc, actionName, runPanelSettings, additional_params}: {
    useMutateFunc: any,
    actionName: string,
    runPanelSettings: IRunPanelSettings,
    additional_params: string | null | undefined,
}) => {
    useMutateFunc({
        url: `http://localhost:8990/api/actions/`,
        method: "post",
        config: {
            headers: {
                "Authorization": "Bearer " + nookies.get()["token"],
            },
        },
        values: {action: actionName, runner_params: runPanelSettings, additional_params: additional_params}
    }, {
        onSuccess: (data: {
            data: { state: React.SetStateAction<string>; };
        }, variables: any, context: any) => {
            console.debug("Received response for action: " + JSON.stringify(data))
        },
    });
}