equal-aqua•2w ago

Custom resources endpoint

Hello, i am learning refine, and i am trying to call all customers, but my api looks like this "admin/customer/requests" and i am really confused how to implement it here { name: 'customer/requests', list: '/customers/requests', meta: { label: 'Žiadosti o účet', parentName: 'customer', route: '/admin/customer/requests', }, },

5 Replies

kapa.ai•2w ago

Hi @!!DETLIXX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're trying to configure a resource in refine to connect with an API endpoint at "admin/customer/requests". Let me help you with the correct configuration. In refine, the resources property connects your API endpoints with your frontend routes. Based on your API structure, here's how you should configure your resource:

{
  name: "customer/requests",
  list: "/customers/requests",
  meta: {
    label: 'Žiadosti o účet',
    parentName: 'customer',
    dataProviderName: "default", // if you're using the default data provider
  },
}

{
  name: "customer/requests",
  list: "/customers/requests",
  meta: {
    label: 'Žiadosti o účet',
    parentName: 'customer',
    dataProviderName: "default", // if you're using the default data provider
  },
}

The key part you're missing is that you need to customize your data provider to handle the custom API endpoint structure. There are a few approaches to solve this: Option 1: Use the meta property with a custom endpoint You can pass the custom endpoint through the meta object and then handle it in your data provider:

const createDrawerFormProps = useModalForm({
  refineCoreProps: { 
    action: "create", 
    resource: "customer/requests",
    meta: { endpoint: "admin/customer/requests" } 
  },
});

const createDrawerFormProps = useModalForm({
  refineCoreProps: { 
    action: "create", 
    resource: "customer/requests",
    meta: { endpoint: "admin/customer/requests" } 
  },
});

Then customize your data provider to use this meta information:

create: async ({ resource, variables, meta }) => {
  const url = `${apiUrl}/${meta?.endpoint || resource}`;
  // rest of your code
}

create: async ({ resource, variables, meta }) => {
  const url = `${apiUrl}/${meta?.endpoint || resource}`;
  // rest of your code
}

Option 2: Swizzle the data provider You can customize your data provider to handle specific resources differently:

getList: async ({ resource, meta }) => {
  let url;
  if (resource === "customer/requests") {
    url = `${apiUrl}/admin/customer/requests`;
  } else {
    url = `${apiUrl}/${resource}`;
  }
  
  // rest of your code
}

getList: async ({ resource, meta }) => {
  let url;
  if (resource === "customer/requests") {
    url = `${apiUrl}/admin/customer/requests`;
  } else {
    url = `${apiUrl}/${resource}`;
  }
  
  // rest of your code
}

This approach is recommended in the refine documentation for handling custom API structures Link to issue solution. Remember that the name property in resources is what will be used by default in data provider requests, while the list property defines the frontend route. If your API structure doesn't match your frontend routes, you'll need to customize the data provider as shown above. Let me know if you need further clarification on implementing this! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@410826510841151498> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

equal-aquaOP•2w ago

@kapa.ai This: { name: "customer/requests", list: "/customers/requests", meta: { label: 'Žiadosti o účet', parentName: 'customer', dataProviderName: "default", // if you're using the default data provider }, } is still callling this: { "message": "Cannot GET /api/v1/admin/customer_requests?_end=10&_start=0", "error": "Not Found", "statusCode": 404 } I dont understatnt. 1. Why there is customer_requests 2. Why it doesnt call that endpoint

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue you're encountering with your API endpoint. Let me explain what's happening and how to fix it: The Problem 1. The underscore in customer_requests is happening because refine's default data provider typically converts slashes in resource names to underscores for API calls. 2. The endpoint isn't being called correctly because you need to explicitly tell the data provider to use your custom API path structure. Solution You need to customize your data provider to handle your specific API structure. Here are two approaches: Option 1: Use a custom resource with meta.apiPath

{
  name: "customerRequests", // Use a simple name without slashes
  list: "/customers/requests",
  meta: {
    label: 'Žiadosti o účet',
    parentName: 'customer',
    apiPath: "admin/customer/requests" // Specify the exact API path
  },
}

{
  name: "customerRequests", // Use a simple name without slashes
  list: "/customers/requests",
  meta: {
    label: 'Žiadosti o účet',
    parentName: 'customer',
    apiPath: "admin/customer/requests" // Specify the exact API path
  },
}

Then modify your data provider to use this meta information:

// Swizzle your data provider
const customDataProvider = {
  ...dataProvider,
  getList: async ({ resource, meta, ...rest }) => {
    const apiUrl = "your-api-base-url";
    const url = `${apiUrl}/${meta?.apiPath || resource}`;
    
    // Rest of your getList implementation
    // ...
  }
}

// Swizzle your data provider
const customDataProvider = {
  ...dataProvider,
  getList: async ({ resource, meta, ...rest }) => {
    const apiUrl = "your-api-base-url";
    const url = `${apiUrl}/${meta?.apiPath || resource}`;
    
    // Rest of your getList implementation
    // ...
  }
}

Option 2: Use resource identifier As mentioned in the refine documentation, you can use an identifier to differentiate resources:

{
  name: "admin/customer/requests", // The actual API endpoint
  identifier: "customerRequests", // A unique identifier for this resource
  list: "/customers/requests",
  meta: {
    label: 'Žiadosti o účet',
    parentName: 'customer',
  },
}

{
  name: "admin/customer/requests", // The actual API endpoint
  identifier: "customerRequests", // A unique identifier for this resource
  list: "/customers/requests",
  meta: {
    label: 'Žiadosti o účet',
    parentName: 'customer',
  },
}

Then in your components, you would reference this resource by its identifier:

useTable({ resource: "customerRequests" });

useTable({ resource: "customerRequests" });

This approach is documented in the resources section of the refine documentation. The key issue is that refine's default behavior doesn't match your API structure, so you need to explicitly tell it how to construct the API paths. By customizing the data provider, you can ensure it calls the correct endpoint. Let me know if you need more specific guidance on implementing either of these solutions! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@410826510841151498> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Custom resources endpoint

Did you find this page helpful?