yappiest-sapphire•7d ago

Json-server pagination

having a json server that contains mock data im trying to use the pagination but i would like to know if due to the way the query params of json server works that use _page and _limit will cause issue due to the query params that refine use are pageSize and current

8 Replies

kapa.ai•7d ago

Hi @Lost Spartan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, it appears that there might indeed be a discrepancy between the pagination parameters used by json-server and those used by refine. This could potentially cause issues with pagination when using refine with a json-server backend. Refine's default data provider (simple-rest) uses _start and _end parameters for pagination, which differs from json-server's _page and _limit parameters. This is evident from the Data Provider Interface documentation which shows:

const generatePagination = (pagination?: Pagination) => {
  const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

  const query: {
    _start?: number;
    _end?: number;
  } = {};

  if (mode === "server") {
    query._start = (current - 1) * pageSize;
    query._end = current * pageSize;
  }

  return query;
};

const generatePagination = (pagination?: Pagination) => {
  const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

  const query: {
    _start?: number;
    _end?: number;
  } = {};

  if (mode === "server") {
    query._start = (current - 1) * pageSize;
    query._end = current * pageSize;
  }

  return query;
};

To resolve this issue, you have a couple of options: 1. Create a custom data provider that uses the correct pagination parameters for json-server (_page and _limit). 2. Override the getList method of the data provider to use the correct parameters. This approach is mentioned in a GitHub issue comment: "Overriding the getList method of the data provider, assuming this is @pankod/refine-simple-rest you can find the source code here, https://github.com/pankod/refine/blob/next/packages/simple-rest/src/index.ts#L93-L135 you can do your changes and update your data provider like dataProvider={{...dataProvider, getList: myCustomGetList}}" By implementing one of these solutions, you should be able to make the pagination work correctly with your json-server backend. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

yappiest-sapphireOP•7d ago

@kapa.ai is there a way to modify my json server so it complies with what refine needs?

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, there is a way to modify your json-server to comply with what refine needs for pagination. You can achieve this by using custom routes in json-server. According to the FAQ in the refine documentation, you can override specific functions of data providers. This approach can be applied to make json-server work with refine's pagination parameters. Here's how you can modify your json-server to work with refine's pagination: 1. Create a routes.json file in your json-server project with the following content:

{
  "/api/*": "/$1",
  "/:resource": "/:resource?_start=:start&_end=:end",
  "/:resource/:id": "/:resource/:id"
}

{
  "/api/*": "/$1",
  "/:resource": "/:resource?_start=:start&_end=:end",
  "/:resource/:id": "/:resource/:id"
}

2. When starting your json-server, use the --routes flag to specify your custom routes:

json-server --watch db.json --routes routes.json

json-server --watch db.json --routes routes.json

This configuration will translate refine's _start and _end parameters to json-server's _start and _end parameters, which it can understand for pagination. By doing this, you're essentially creating a middleware that transforms the incoming requests to match what json-server expects, while still allowing refine to use its default pagination parameters. Remember to adjust your refine data provider's base URL to include /api if you're using the exact route configuration provided above. This approach allows you to keep using json-server without modifying refine's data provider, making it a more maintainable solution in the long run. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

yappiest-sapphireOP•6d ago

@kapa.ai i want the blog post view to have a dropdown that has the categories and when the dropdown is populated the view should filter the list by that value

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! I can help you implement a dropdown for categories that filters the blog post list in refine. This can be achieved using the <FilterDropdown> component along with the useSelect hook. Here's how you can do it: 1. First, we'll use the useSelect hook to fetch the categories: 2. Then, we'll implement the <FilterDropdown> component with a <Select> inside it in your blog post list component. Here's an example of how you can implement this:

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

const PostList: React.FC = () => {
  const { tableProps } = useTable<IPost>();

  const { selectProps: categorySelectProps } = useSelect<ICategory>({
    resource: "categories",
    optionLabel: "title",
    optionValue: "id",
  });

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="title" title="Title" />
        <Table.Column
          dataIndex={["category", "id"]}
          title="Category"
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Select
                style={{ minWidth: 200 }}
                mode="multiple"
                placeholder="Select Category"
                {...categorySelectProps}
              />
            </FilterDropdown>
          )}
        />
      </Table>
    </List>
  );
};

interface IPost {
  id: number;
  title: string;
  category: {
    id: number;
  };
}

interface ICategory {
  id: number;
  title: string;
}

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

const PostList: React.FC = () => {
  const { tableProps } = useTable<IPost>();

  const { selectProps: categorySelectProps } = useSelect<ICategory>({
    resource: "categories",
    optionLabel: "title",
    optionValue: "id",
  });

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="title" title="Title" />
        <Table.Column
          dataIndex={["category", "id"]}
          title="Category"
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Select
                style={{ minWidth: 200 }}
                mode="multiple"
                placeholder="Select Category"
                {...categorySelectProps}
              />
            </FilterDropdown>
          )}
        />
      </Table>
    </List>
  );
};

interface IPost {
  id: number;
  title: string;
  category: {
    id: number;
  };
}

interface ICategory {
  id: number;
  title: string;
}

This implementation does the following: 1. We use the useSelect hook to fetch the categories. This populates the categorySelectProps with the necessary data for the <Select> component. 2. In the <Table.Column> for the category, we use the filterDropdown prop to render our custom filter. 3. Inside filterDropdown, we use the <FilterDropdown> component from refine, which handles the filter logic. 4. Within <FilterDropdown>, we render an Ant Design <Select> component, passing it the categorySelectProps from our useSelect hook. 5. The mode="multiple" prop on the <Select> allows for selecting multiple categories if desired. When you select one or more categories from this dropdown, the <FilterDropdown> component will automatically apply the filter to your table, showing only the blog posts that belong to the selected categories. This solution combines the power of refine's <FilterDropdown> with Ant Design's <Select> component to create a user-friendly and efficient filtering system for your blog post list. FilterDropdown documentation Remember to adjust the interfaces (IPost and ICategory) according to your actual data structure if needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

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

Json-server pagination

Did you find this page helpful?