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•5mo ago

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

fascinating-indigo•5mo ago

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

kapa.ai•5mo 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•5mo ago

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

fascinating-indigo•5mo 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•5mo 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•5mo ago

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

fascinating-indigo•5mo 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•5mo 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•5mo ago

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

fascinating-indigo•5mo 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•5mo 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•5mo ago

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

fascinating-indigo•5mo ago

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