extended-salmon•11mo ago

UseTable does not call Connection endpoint for count

I did a quick tutorial where I had a single book page with Refine and Ant. I defined the resources in the App component and provided a graphql dataprovider. Both filtering and paging worked out of the box. I am trying to move this simple table to a Refine - Next js - Ant project. I had to provide the resource to the table to make the querying working and I can't seem to figure out how to make the paging magic work. Do I need to explicit call bookListConnection endpoint?

6 Replies

kapa.ai•11mo ago

Hi @gergely_09371. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, pagination, filtering, and sorting are handled out of the box when using hooks like useTable or useSimpleList. These hooks are designed to work with Ant Design components like <Table> and <List>, respectively. When using useTable, it returns properties that are compatible with Ant Design's <Table> component. All features such as sorting, filtering, and pagination come out of the box. Under the hood, it uses useList for the fetch. Here's an example of how to use it:

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

interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
}  

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

 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column dataIndex="content" title="Content" />  
 <Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};

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

interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
}  

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

 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column dataIndex="content" title="Content" />  
 <Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};

(Source: refine.dev docs (https://refine.dev/docs/api-reference/antd/hooks/table/useTable/)) You don't need to explicitly call the bookListConnection endpoint. The useTable hook should handle the data fetching for you, as long as you've set up your data provider correctly. If you're still having trouble, it might be helpful to check your data provider setup and ensure that it's correctly configured to work with your API. You can refer to the refine.dev docs (https://refine.dev/docs) for more information on setting up data providers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

extended-salmon•11mo ago

@kapa.ai this is something really similar to what I had as useTable except I had metaData defined (for graphQL) . It worked for a Refine - AntDesign project. But after generating a project with Next.js it also had to add a resource into useTable. I can only see a call to bookList and not to bookListConnection. bookListConnection was returning the count in my Refine - AntDesign project

adverse-sapphire•11mo ago

Hello @gergely_09371 if you provide reproducible example, i'm happy to debug

extended-salmon•11mo ago

Thanks @alicanerdurmaz ! It turned out that I used a dataProvider from @refinedev/graphql in one project and from @refinedev/strapi-graphql in the other project.

adverse-sapphire•11mo ago

I'm glad to hear 🙌🏻