modern-teal•4d ago

Strapi V4 Data Provider

How can I link a Ressource that has a different name from my strapi api. I have a "Medium" strapi api but with time and features added the "Platform" name is more appropriate. On refine I want to have the "Platform" naming but in strapi I want to keep apis as they are for now. Any idea how to do that please ? Thanks

8 Replies

kapa.ai•4d ago

Hi @ayhid. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To link a resource with a different name from your Strapi API in refine, you can use the identifier property in your resource definition. This allows you to keep your Strapi API naming as it is while using a different name in your refine application. Here's how you can do it: 1. In your <Refine> component, define your resource like this:

<Refine
  // ... other props
  resources={[
    {
      name: "platforms",
      identifier: "mediums",
      // ... other resource properties
    },
  ]}
/>

<Refine
  // ... other props
  resources={[
    {
      name: "platforms",
      identifier: "mediums",
      // ... other resource properties
    },
  ]}
/>

2. When using data hooks or components, you can refer to this resource using the "platforms" name:

useTable({ resource: "platforms" });

useTable({ resource: "platforms" });

3. The Strapi V4 data provider will use the identifier ("mediums") when making API calls, while your refine application will use the name ("platforms"). This approach allows you to maintain your existing Strapi API structure while using a different name in your refine application. For more information on resource configuration and the use of identifier, you can refer to the Refine documentation on resources. Refine documentation on resources provides detailed information about the identifier property and how it can be used to differentiate between resources with the same name but different configurations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

modern-tealOP•4d ago

the suggested identifier index does not work refines makes api calls to /api/platforms instead of /api/mediums @kapa.ai are you sure about this?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, I am sure about the information I provided regarding the use of the identifier property to link a resource with a different name from your Strapi API in refine. This approach is documented in the official refine documentation. To further confirm this, let me highlight the relevant part from the knowledge source: Refine documentation on resources states: "The identifier value serves as the main matching key for a resource. It allows you to effectively differentiate between multiple resources that share the same name." The documentation provides an example that demonstrates this concept:

<Refine
    ...
    dataProvider={{
        default: defaultDataProvider,
        typicode: typicodeDataProvider,
    }}
    resources={[
        {
            name: "posts",
            identifier: "posts",
            meta: {
                foo: "bar",
            },
        },
        {
            name: "posts",
            identifier: "featured-posts",
            meta: {
                foo: "baz",
                filter: {
                    featured: true,
                },
                dataProviderName: "typicode",
            },
        },
    ]}
>
...
</Refine>;

<Refine
    ...
    dataProvider={{
        default: defaultDataProvider,
        typicode: typicodeDataProvider,
    }}
    resources={[
        {
            name: "posts",
            identifier: "posts",
            meta: {
                foo: "bar",
            },
        },
        {
            name: "posts",
            identifier: "featured-posts",
            meta: {
                foo: "baz",
                filter: {
                    featured: true,
                },
                dataProviderName: "typicode",
            },
        },
    ]}
>
...
</Refine>;

This example shows how you can have multiple resources with the same name but different identifier values, which is exactly what you need for your Strapi API and refine application scenario. So, yes, I am confident about this solution. It's a documented feature in refine that allows you to maintain different naming conventions between your API and your frontend application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

modern-tealOP•4d ago

@kapa.ai Doing this refine still makes queries to /api/platforms @kapa.ai could you tell me how can I use this to create my list page ?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! I'd be happy to explain how you can use this approach to create your list page for the "Platform" resource that maps to the "Medium" API in Strapi. Here's a step-by-step guide: 1. First, make sure you've set up your resource with the correct name and identifier in your <Refine> component as we discussed earlier:

<Refine
  // ... other props
  resources={[
    {
      name: "platforms",
      identifier: "mediums",
      list: "/platforms"
      // ... other resource properties
    },
  ]}
/>

<Refine
  // ... other props
  resources={[
    {
      name: "platforms",
      identifier: "mediums",
      list: "/platforms"
      // ... other resource properties
    },
  ]}
/>

2. Now, to create your list page, you can use the <List> component from refine. Here's an example of how you might set up your list page:

import { List, useTable } from "@refinedev/antd";
import { Table } from "antd";

const PlatformList: React.FC = () => {
  const { tableProps } = useTable({
    resource: "platforms",
  });

  return (
    <List>
      <Table {...tableProps} columns={[
        // Define your columns here
        { dataIndex: "id", title: "ID" },
        { dataIndex: "name", title: "Name" },
        // ... other columns
      ]} />
    </List>
  );
};

import { List, useTable } from "@refinedev/antd";
import { Table } from "antd";

const PlatformList: React.FC = () => {
  const { tableProps } = useTable({
    resource: "platforms",
  });

  return (
    <List>
      <Table {...tableProps} columns={[
        // Define your columns here
        { dataIndex: "id", title: "ID" },
        { dataIndex: "name", title: "Name" },
        // ... other columns
      ]} />
    </List>
  );
};

In this example, we're using the useTable hook and the <List> component from refine, along with Ant Design's Table component. The resource prop in useTable is set to "platforms", which matches the name we defined in our resource configuration. 3. Remember to import and use this component in your route configuration or as a child of your <Refine> component:

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/strapi-v4";

import { PlatformList } from "pages/platforms";
const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider("YOUR_API_URL")}
      resources={[
        {
          name: "platforms",
          identifier: "mediums",
          list: "/platforms",
        },
      ]}
    >
      {/* Your other components */}
      <PlatformList />
    </Refine>
  );
};

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/strapi-v4";

import { PlatformList } from "pages/platforms";
const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider("YOUR_API_URL")}
      resources={[
        {
          name: "platforms",
          identifier: "mediums",
          list: "/platforms",
        },
      ]}
    >
      {/* Your other components */}
      <PlatformList />
    </Refine>
  );
};

This setup will create a list page for your "Platform" resource, which will interact with the "Medium" API in Strapi. The useTable hook will automatically handle pagination, sorting, and filtering, sending the correct requests to your Strapi API using the "mediums" identifier. For more detailed information on creating list pages, you can refer to the List documentation for Ant Design. Remember, the exact implementation might vary depending on your UI framework and specific requirements, but this should give you a good starting point for creating your list page. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Strapi V4 Data Provider

Did you find this page helpful?