like-gold•2y ago

Hello I have an api endpoint with parent

Hello, I have an api endpoint with parent paths, like api/v1/admin/organisations....when using refine resources api calls are made to api/v1/organisations. How can I customize the endpoint url for organisations resource?

13 Replies

foreign-sapphire•2y ago

Hi, when you give dataProvider like this, @pankod/refine-simple-rest create url like that: const url = ${apiUrl}/${resource};

import dataProvider from "@pankod/refine-simple-rest";

<Refine
dataProvider={dataProvider("https://your-domain.dev/api/v1/admin")}
resources={[
    {
        name: "organisations",
        list: OrganisationsList,
        create: OrganisationsCreate,
        edit: OrganisationsEdit,
        show: OrganisationsShow,
    },
]}
/>

import dataProvider from "@pankod/refine-simple-rest";

<Refine
dataProvider={dataProvider("https://your-domain.dev/api/v1/admin")}
resources={[
    {
        name: "organisations",
        list: OrganisationsList,
        create: OrganisationsCreate,
        edit: OrganisationsEdit,
        show: OrganisationsShow,
    },
]}
/>

do you have custom data provider ?

equal-aqua•2y ago

Thanks @alicanerdurmaz I have api hosted like https://your-domain.dev/api/v1 but some of the admin and auth endpoints are like so https://your-domain.dev/api/v1/admin and https://your-domain.dev/api/v1/auth and rest of the functionality at the root so the data provider is the same for all and its simple rest dataprovider So I want a way to customize the url for the resource instead of refine's default lookup strategy

<Refine
          dataProvider={dataProvider(API_URL, axiosInstance)}
          ...
          resources={[
            {
              icon: <Icons.BankOutlined />,
              name: "organisations",
              list: AntdInferencer,
              show: AntdInferencer,
              create: AntdInferencer,
              edit: AntdInferencer,
            },
          ]}
          options={{
            disableTelemetry: true,
          }}
          ...
        />

<Refine
          dataProvider={dataProvider(API_URL, axiosInstance)}
          ...
          resources={[
            {
              icon: <Icons.BankOutlined />,
              name: "organisations",
              list: AntdInferencer,
              show: AntdInferencer,
              create: AntdInferencer,
              edit: AntdInferencer,
            },
          ]}
          options={{
            disableTelemetry: true,
          }}
          ...
        />

const API_URL = ${process.env.REACT_APP_API_URL} REACT_APP_API_URL=http://localhost:8000/api/v1

foreign-sapphire•2y ago

i understand. thank you for clear explanation. all data related hooks have resource property. https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#resource when you havehttp://localhost:8000/api/v1 this you can use this resource:"admin/organisations"

equal-aqua•2y ago

This doesn't solve the problem for the Inferencer, ideally what would be convenient is to have a resource property right on the config object Something like

resources={[
            {
              icon: <Icons.BankOutlined />,
              name: "organisations",
              path: "admin/organisations"
              list: AntdInferencer,
              show: AntdInferencer,
              create: AntdInferencer,
              edit: AntdInferencer,
            },
          ]}

resources={[
            {
              icon: <Icons.BankOutlined />,
              name: "organisations",
              path: "admin/organisations"
              list: AntdInferencer,
              show: AntdInferencer,
              create: AntdInferencer,
              edit: AntdInferencer,
            },
          ]}

foreign-sapphire•2y ago

Let's think about what else we can do. i will be inform you as soon as possible

equal-aqua•2y ago

Thanks

foreign-sapphire•2y ago

inferencer component have resource prop. you can give "admin/organisations" to this. https://refine.dev/docs/api-reference/antd/components/inferencer/#usage please click In Custom Components in tab section or you can give resource like this.

   resources={[
                        {
                            name: "admin/organisations",
                            icon: <Icons.BankOutlined />,
                            list: AntdInferencer,
                            show: AntdInferencer,
                            create: AntdInferencer,
                            edit: AntdInferencer,
                            options: {
                                label: "Organisations",
                            },
                        },
                    ]}

   resources={[
                        {
                            name: "admin/organisations",
                            icon: <Icons.BankOutlined />,
                            list: AntdInferencer,
                            show: AntdInferencer,
                            create: AntdInferencer,
                            edit: AntdInferencer,
                            options: {
                                label: "Organisations",
                            },
                        },
                    ]}

equal-aqua•2y ago

That makes sense. But hitting http://localhost:3000/admin/organisations/create/ is making a Get request to organisations endpoint I made a simple endpoint to return an empty array for organisations and I am getting Something went wrong while fetching the resource data. No error on the console

foreign-sapphire•2y ago

it should be http://localhost:8000/api/v1/admin/organisations/create/ ? what is network output ? These errors can have many causes. can you give me more detail ? i tested this code on our example repo. subpath url examples works as expected https://refine.dev/docs/api-reference/antd/components/inferencer/#example. this code souldn't create problems like that. probably something else went wrong By the way, inferencer is aims to speed up the development process. It is not intended to be used in production. I suggest you to click the Show Code button and create your own component with that code. so we can easily debug

equal-aqua•2y ago

If its not intended for production, I will continue with normal components

foreign-sapphire•2y ago

You can copy paste and customize when need. Our intent was speed up development process. Ofc Any suggestions are valuable for us 🙏

equal-aqua•2y ago

Yes, the whole team has been very helpful I have contributed a data provider and azure ad documentation to refine already Hoping to contribute more in future 🙂

foreign-sapphire•2y ago

Thank you 🙏 we are really appreciated