How to custom Id in URL resource?

I want to update the format of the resource URL to pass Id

23 Replies

Hi @tingadev. 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 customize the id in the URL of a resource by using the setId function from the useForm hook. Here's an example of how you can do this:

import { useForm } from "@refinedev/react-hook-form";  
  
const {  
 refineCore: { setId },  
} = useForm({  
 refineCoreProps: {  
 resource: "custom-resource",  
 },  
});  
  
setId("123");

import { useForm } from "@refinedev/react-hook-form";  
  
const {  
 refineCore: { setId },  
} = useForm({  
 refineCoreProps: {  
 resource: "custom-resource",  
 },  
});  
  
setId("123");

In this example, setId is used to set the id value to "123" for the resource "custom-resource". If you have multiple resources with the same name, you can pass the identifier instead of the 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 of the resource defined in the <Refine/> component. For more information, refer to the identifier section of the <Refine/> component documentation (https://refine.dev/docs/core/refine-component/#identifier) [^1^]. Additionally, there's an open discussion on GitHub about allowing customization of the id property in the resource definition. This feature is currently in the backlog and might be implemented in the future [^2^]. [^1^]: (https://refine.dev/docs/packages/react-hook-form/use-form#resource) [^2^]: (https://github.com/refinedev/refine/issues/3486) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

afraid-scarlet•3mo ago

@kapa.ai how can I move id param to middle of path?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, you can define your own route parameters using the :param syntax in your resource action definitions. This allows you to place the id parameter anywhere in your route. For example, if you have a posts resource and you want to create a route for the show action of a specific post, you can define the show action as /posts/show/:id. Here's an example:

{
  name: 'posts',
  list: '/posts',
  show: '/posts/show/:id',
  edit: '/posts/edit/:id',
}

{
  name: 'posts',
  list: '/posts',
  show: '/posts/show/:id',
  edit: '/posts/edit/:id',
}

In this example, the id parameter is placed in the middle of the path for the show and edit actions of the posts resource. For more information, refer to the React Router v6 Usage documentation (https://refine.dev/docs/routing/integrations/react-router#usage-with-a-root-route) [^1^]. [^1^]: (https://refine.dev/docs/routing/integrations/react-router#usage-with-a-root-route) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

afraid-scarlet•3mo ago

@kapa.ai I'm using useForm hook and want to move id param into middle instead of end of resource. Example: resource: products/:id/edit-custom,

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, the useForm hook is used to manage the form state and it determines the id from the route by default. However, the placement of the id in the URL is determined by the routing configuration of your application, not by the useForm hook itself. If you want to change the URL structure to products/:id/edit-custom, you would need to define your routes accordingly. Here's an example of how you can do this:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { EditCustom } from "./pages/products";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="products/:id/edit-custom" element={<EditCustom />} />
      </Routes>
    </Router>
  );
}

export default App;

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { EditCustom } from "./pages/products";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="products/:id/edit-custom" element={<EditCustom />} />
      </Routes>
    </Router>
  );
}

export default App;

In this example, the EditCustom component would be the form that uses the useForm hook. Inside this component, you can use the useParams hook from react-router-dom to access the id from the URL:

import { useParams } from "react-router-dom";
import { useForm } from "@pankod/refine";

function EditCustom() {
  const { id } = useParams();
  const { formMethods, saveButtonProps } = useForm({
    resource: "products",
    id: id,
  });

  // rest of your form code...
}

import { useParams } from "react-router-dom";
import { useForm } from "@pankod/refine";

function EditCustom() {
  const { id } = useParams();
  const { formMethods, saveButtonProps } = useForm({
    resource: "products",
    id: id,
  });

  // rest of your form code...
}

Please note that this is a general guide and you might need to adjust the code to fit your specific use case. For more information, you can refer to the Refine documentation (https://refine.dev/docs) and the React Router documentation (https://reactrouter.com/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

afraid-scarlet•3mo ago

@kapa.ai Yep I see, but I mean is I want to update the url to products/:id/edit-custom when I submit, now the id param always put at the end of url

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, the URL structure is determined by the resource definitions you provide in the <Refine /> component. If you want to change the URL to products/:id/edit-custom after submitting a form, you would need to define your edit action route accordingly in your resource definitions. Here's an example of how you can do this:

<Refine
  resources={[
    {
      name: "products",
      list: "/products",
      create: "/products/create",
      edit: "/products/:id/edit-custom",
      // other actions...
    },
    // other resources...
  ]}
  // other props...
/>

<Refine
  resources={[
    {
      name: "products",
      list: "/products",
      create: "/products/create",
      edit: "/products/:id/edit-custom",
      // other actions...
    },
    // other resources...
  ]}
  // other props...
/>

In this example, the edit action route for the products resource is defined as /products/:id/edit-custom. This means that when you navigate to the edit page of a product, the URL will be in the format products/:id/edit-custom. Please note that this will change the URL structure for all product edit pages. If you want to change the URL only for specific products or under certain conditions, you might need to implement custom routing logic in your application. For more information, you can refer to the Refine documentation (https://refine.dev/docs) and the React Router documentation (https://reactrouter.com/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

afraid-scarlet•3mo ago

@kapa.ai how to I move id param to the middle of URL? example :

getOne: async ({ resource, id, meta }) => {
        const locale = meta?.locale;
        const fields = meta?.fields;
        const populate = meta?.populate;

        const query = {
            locale,
            fields,
            populate,
        };

        const url =

${apiUrl}/${resource}/${id}?${stringify(query, { encode: false, })}

;

        const { data } = await httpClient.get(url);

        return {
            data: normalizeData(data),
        };
    },

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In your getOne function, you can modify the URL structure by changing the order of the parameters in the url constant. If you want to move the id parameter to the middle of the URL, you can do so like this:

const url = `${apiUrl}/${id}/${resource}?${stringify(query, {
  encode: false,
})}`;

const url = `${apiUrl}/${id}/${resource}?${stringify(query, {
  encode: false,
})}`;

In this example, the id parameter is placed before the resource parameter in the URL. This will result in URLs in the format apiUrl/id/resource. Please note that this will change the URL structure for all requests made by the getOne function. If you want to change the URL only for specific resources or under certain conditions, you might need to implement custom logic in your function. For more information, you can refer to the Refine documentation (https://refine.dev/docs) and the React Router documentation (https://reactrouter.com/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

afraid-scarlet•3mo ago

@kapa.ai how to put id param to middle URL?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, the placement of the id parameter in the URL is determined by the routing configuration of your application. If you want to place the id parameter in the middle of the URL, you can do so by defining your routes accordingly. For example, if you have a posts resource and you want to create a route for the show action of a specific post, you can define the show action as /posts/:id/show. Here's how you can do this:

{
  name: 'posts',
  list: '/posts',
  show: '/posts/:id/show',
  edit: '/posts/:id/edit',
}

{
  name: 'posts',
  list: '/posts',
  show: '/posts/:id/show',
  edit: '/posts/:id/edit',
}

kapa.ai•3mo ago

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

afraid-scarlet•3mo ago

@kapa.ai How to I can get icon field from strapi v4 by Inferencer ?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To get the icon field from Strapi v4 using the Inferencer in Refine, you can use the fieldTransformer function. This function allows you to customize the fields that the Inferencer generates based on the responses from your API. Here's an example of how you can do this:

import { MantineShowInferencer, InferField } from "@refinedev/inferencer/mantine";

const fieldTransformer = (field: InferField) => {
  if (field.key === "icon") {
    // customize the icon field as needed
    return {
      ...field,
      // additional customization...
    };
  }

  return field;
};

function App() {
  //...
  return (
    //...
    <Route
      path="show/:id"
      element={
        <MantineShowInferencer fieldTransformer={fieldTransformer} />
      }
    />
    //...
  );
}

import { MantineShowInferencer, InferField } from "@refinedev/inferencer/mantine";

const fieldTransformer = (field: InferField) => {
  if (field.key === "icon") {
    // customize the icon field as needed
    return {
      ...field,
      // additional customization...
    };
  }

  return field;
};

function App() {
  //...
  return (
    //...
    <Route
      path="show/:id"
      element={
        <MantineShowInferencer fieldTransformer={fieldTransformer} />
      }
    />
    //...
  );
}

In this example, the fieldTransformer function checks if the key of the field is "icon". If it is, it customizes the field as needed. You can add your own customization logic inside the if statement. Please note that this is a general guide and you might need to adjust the code to fit your specific use case. For more information, you can refer to the Refine documentation (https://refine.dev/docs) and the Strapi documentation (https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html) [^1^]. [^1^]: (https://refine.dev/blog/react-admin-panel#using-the-refine-mantine-inferencer) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

afraid-scarlet•3mo ago

@kapa.ai How can generate component follow field types Inferencer?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine's Inferencer package automatically generates views for resources based on the data structure. It infers the field types using a set of functions that each checks the field for a specific type and returns the inferred type. The available field types are: - relation - array - object - date - email - image - url - richtext - text - number - boolean - unknown - custom${string} The `custom${string}

 type is used by the inferencer components of UI packages when they have custom representations[^1^].

To render the components, the Inferencer uses the

renderer functions to create the code for the components and also use the same code to render the components in the view. renderer

 functions are constructed per action type and the UI package[^2^].

For example, if you're using the Ant Design UI toolkit, you can use the

AntdInferencer

 component to automatically generate views for your resources[^3^].

Here's an example of how you can use the Inferencer:

```jsx
import { AntdInferencer } from "@refinedev/inferencer/antd";

function App() {
  //...
  return (
    //...
    <Route
      path="show/:id"
      element={<AntdInferencer />}
    />
    //...
  );
}
```

In this example, the

AntdInferencer component is used to automatically generate the show view for a resource. The :id` in the route is the ID of the resource. Please note that this is a general guide and you might need to adjust the code to fit your specific use case. For more information, you can refer to the Refine documentation (https://refine.dev/docs). [^1^]: (https://refine.dev/docs/packages/inferencer#how-the-fields-are-inferred) [^2^]: (https://refine.dev/docs/packages/inferencer#how-the-components-are-rendered-and-the-code-is-generated) [^3^]: (https://refine.dev/docs/ui-integrations/ant-design/components/inferencer/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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