ratty-blush•9mo ago

how can you change the get posts request in the Chakra UI Table example?

Hi, i would like to change the get posts request that i am sending to the backend. I would like to add some new params. How can i do it? I am not able to find where is the get request triggered

11 Replies

kapa.ai•9mo ago

Hi @Yusseiin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, data fetching is handled by data hooks. In the Chakra UI Table example, the useTable hook is used to fetch data. If you want to modify the request, you can do so by changing the parameters of the useTable hook. Here is an example of how you can use the useTable hook:

useTable({  
 resource: "/users/1/posts",  
});

useTable({  
 resource: "/users/1/posts",  
});

In this example, the resource property is used to specify the URL for the request. If you want to add new parameters to your request, you can do so by modifying the resource property. For more complex requests, you might need to use other hooks or methods provided by Refine. Unfortunately, without more specific information about what you're trying to achieve, it's hard to provide a more detailed answer. For more information, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/faq#how-can-i-request-an-api-with-nested-route). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

ratty-blushOP•9mo ago

@kapa.ai in the example useTable is like this: = useTable({ columns, refineCoreProps: { initialSorter: [ { field: "id", order: "desc", }, ], }, }); i do not have a resource params @kapa.ai in the example useTable is like this: = useTable({ columns, refineCoreProps: { initialSorter: [ { field: "id", order: "desc", }, ], }, }); i do not have a resource params

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the example you provided, the useTable hook is used without a resource parameter. This means that the resource is inferred from the current route based on your resource definitions. If you want to specify a different resource or add parameters to your request, you can add a resource parameter to the useTable hook. Here's an example:

const { tableProps, sorterProps } = useTable({
    resource: "posts", // specify the resource here
    columns,
    refineCoreProps: {
      initialSorter: [
        {
          field: "id",
          order: "desc",
        },
      ],
    },
});

const { tableProps, sorterProps } = useTable({
    resource: "posts", // specify the resource here
    columns,
    refineCoreProps: {
      initialSorter: [
        {
          field: "id",
          order: "desc",
        },
      ],
    },
});

In this example, the resource parameter is set to "posts", which means that the useTable hook will fetch data from the "posts" resource. If you want to add parameters to your request, you can do so by modifying the resource parameter. For example, if you want to fetch posts from a specific user, you can set the resource parameter to "/users/1/posts". For more information, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/tables#resource-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

ratty-blushOP•9mo ago

@kapa.ai seems not working. i got the error " Object literal may only specify known properties, and 'resource' does not exist in type 'UseTableProps<BaseRecord, HttpError, IPost>'.ts(2353," The example is using: import { useTable } from "@refinedev/react-table"; const { getHeaderGroups, getRowModel, setOptions, refineCore: { setCurrent, pageCount, current, tableQueryResult: { data: tableData }, }, } = useTable({ columns, refineCoreProps: { initialSorter: [ { field: "id", order: "desc", }, ], }, });

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useTable hook you're using is from the @refinedev/react-table package, which is a different hook from the useTable hook in the @refinedev/core package. The @refinedev/react-table version of useTable does not accept a resource parameter. The useTable hook from @refinedev/react-table is used for creating tables with the TanStack Table library. It doesn't handle data fetching itself, but instead expects you to provide the data via the data prop. If you want to change the request for fetching data, you would need to do that in the part of your code where you fetch the data, before you pass it to the useTable hook. Here's an example of how you might fetch data and pass it to useTable:

import React from "react";  
import { useTable } from "@refinedev/react-table";  
import { ColumnDef, flexRender } from "@tanstack/react-table";  

// Fetch data here
const fetchData = async () => {
  const response = await fetch('/api/posts'); // Modify this line to change your request
  const data = await response.json();
  return data;
}

const PostList: React.FC = () => {  
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    fetchData().then(setData);
  }, []);

  const columns = React.useMemo<ColumnDef<IPost>[]>(  
    () => [  
      // column definitions here
    ],  
    [],  
  );  

  const { getHeaderGroups, getRowModel } = useTable({  
    columns,
    data, // Pass the fetched data here
  });  

  // rest of your component here
};

import React from "react";  
import { useTable } from "@refinedev/react-table";  
import { ColumnDef, flexRender } from "@tanstack/react-table";  

// Fetch data here
const fetchData = async () => {
  const response = await fetch('/api/posts'); // Modify this line to change your request
  const data = await response.json();
  return data;
}

const PostList: React.FC = () => {  
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    fetchData().then(setData);
  }, []);

  const columns = React.useMemo<ColumnDef<IPost>[]>(  
    () => [  
      // column definitions here
    ],  
    [],  
  );  

  const { getHeaderGroups, getRowModel } = useTable({  
    columns,
    data, // Pass the fetched data here
  });  

  // rest of your component here
};

In this example, the fetchData function is where you would modify your request. The fetched data is then passed to useTable via the data prop. For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/tanstack-table/use-table#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

ratty-blushOP•9mo ago

@kapa.ai In the documentation that you have linked how is the data passed to the table? import React from "react"; import { useTable } from "@refinedev/react-table"; import { ColumnDef, flexRender } from "@tanstack/react-table"; interface IPost { id: number; title: string; content: string; status: "published" | "draft" | "rejected"; } const PostList: React.FC = () => { const columns = React.useMemo<ColumnDef<IPost>[]>( () => [ { id: "id", header: "ID", accessorKey: "id", }, { id: "title", header: "Title", accessorKey: "title", }, { id: "status", header: "Status", accessorKey: "status", }, { id: "createdAt", header: "CreatedAt", accessorKey: "createdAt", }, ], [], ); const { getHeaderGroups, getRowModel } = useTable({ columns, }); return ( <table> <thead> {getHeaderGroups().map((headerGroup) => ( <tr key={headerGroup.id}> {headerGroup.headers.map((header) => { return ( <th key={header.id}> {flexRender( header.column.columnDef.header, header.getContext(), )} </th> ); })} </tr> ))} </thead> <tbody> {getRowModel().rows.map((row) => { return ( <tr key={row.id}> {row.getVisibleCells().map((cell) => { return ( <td key={cell.id}> {flexRender(cell.column.columnDef.cell, cell.getContext())} </td> ); })} </tr> ); })} </tbody> </table> ); }; i am not able to see any "data" params

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the example you provided, the useTable hook is used without a data parameter. This means that the table is not displaying any data. To display data in the table, you need to fetch the data and pass it to the useTable hook via the data parameter. Here's an example of how you can do this:

import React from "react";  
import {{ useTable }} from "@refinedev/react-table";  
import {{ ColumnDef, flexRender }} from "@tanstack/react-table";  

// Fetch data here
const fetchData = async () => {{
  const response = await fetch('/api/posts'); // Modify this line to change your request
  const data = await response.json();
  return data;
}}

const PostList: React.FC = () => {{  
  const [data, setData] = React.useState([]);

  React.useEffect(() => {{
    fetchData().then(setData);
  }}, []);

  const columns = React.useMemo<ColumnDef<IPost>[]>(  
    () => [  
      // column definitions here
    ],  
    [],  
  );  

  const {{ getHeaderGroups, getRowModel }} = useTable({{  
    columns,
    data, // Pass the fetched data here
  }});  

  // rest of your component here
}};

import React from "react";  
import {{ useTable }} from "@refinedev/react-table";  
import {{ ColumnDef, flexRender }} from "@tanstack/react-table";  

// Fetch data here
const fetchData = async () => {{
  const response = await fetch('/api/posts'); // Modify this line to change your request
  const data = await response.json();
  return data;
}}

const PostList: React.FC = () => {{  
  const [data, setData] = React.useState([]);

  React.useEffect(() => {{
    fetchData().then(setData);
  }}, []);

  const columns = React.useMemo<ColumnDef<IPost>[]>(  
    () => [  
      // column definitions here
    ],  
    [],  
  );  

  const {{ getHeaderGroups, getRowModel }} = useTable({{  
    columns,
    data, // Pass the fetched data here
  }});  

  // rest of your component here
}};

In this example, the fetchData function fetches the data, which is then stored in the data state variable. The data variable is then passed to useTable via the data parameter. For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/tanstack-table/use-table#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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