adverse-sapphire•2y ago

How to query join with Nestjsx when use useTable and useShow?

Hello! I really enjoyed using refine with nestjsx data provider recently. 1. Is there any options for useTable or useShow to add query like "resource" + "?join=profile" ? when I change resource to "users?join=profile", refine combines query "users?join=profile?limit=10....." I searched docs but I couldn't find solution. 2. How to optimize using @pankod/refine-antd <EditButton/>, <ShowButton/>,<DeleteButton/> every row. there are almost 300 items on list with 30pages. click other page, it loaded too slowly. when I removed that 3 components, it works fine. <Table.Column<IAdmin> ellipsis={true} title="actions" dataIndex="actions" render={(_, record) => { return ( <Space> <ShowButton hideText size="small" recordItemId={record.id} /> <EditButton hideText size="small" recordItemId={record.id} /> <DeleteButton hideText size="small" recordItemId={record.id} /> </Space> ); }} /> 3. Can I go back previous page index (Ex: List page5) if I navigate to Show page? click show button during searching items, and then i click backward arrow, it navigates to first page of list. Thanks for reading my questions.

2 Replies

metropolitan-bronze•2y ago

Hey @MLOPS, Let me try to answer all 😅 1) Currently, there's no much easy way to do this (for nestjsx data provider) but we're working on some helpers/properties to easily modify requests and responses of data providers in hooks. For now, you can try passing a second argument to the data provider prop in <Refine> component which is the axios instance and add an interceptor to it so you can append your query params or do anything with the request. You can also do by axios.defaults but I assume you don't need to add join=profile to all of the requests 😅 Here's an example code for the interceptor:

import axios from "axios";
import dataProvider from "@pankod/refine-nestjsx-crud";

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((config) => {
    config.params = config.params || {};
    if(some conditions are met) {
      config.params.join = "profile";
    }
    return config;
});

const App = () => {
  return (
    <Refine
      dataProvider={dataProvider(API_URL, axiosInstance)}
      {...}
    />
}

import axios from "axios";
import dataProvider from "@pankod/refine-nestjsx-crud";

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((config) => {
    config.params = config.params || {};
    if(some conditions are met) {
      config.params.join = "profile";
    }
    return config;
});

const App = () => {
  return (
    <Refine
      dataProvider={dataProvider(API_URL, axiosInstance)}
      {...}
    />
}

Other way is, customizing the data provider by re-creating it by copy-ing the source code (Can be seen at https://github.com/refinedev/refine/blob/next/packages/nestjsx-crud/src/index.ts ) but I personally do not recommend doing this if its just for join=profile query parameter 😅 2) This might be happening due to render function being re-initialized on every render and causing every row to re-render 🤔 Creating a memoized component for it or wrapping the function with useMemo might help, if not please let me know and we can try other ways to improve performance here. 3) If I understood correctly, you want to go back to the last page you visited when you click on the back arrow or go back from the browser. This can be done by simply adding syncWithLocation: true to useTable hook in your list page. Sorry for the late response, hoping this would help 🙏

adverse-sapphire•2y ago

Thank you so mush for your answers. 😊 It helps me a lot!