custom queryParams to useDataGrid

Hello guys 👋 I have this code

  const dataGrid = useDataGrid<IAccount>({
    resource: "journalLine/ledger",
    pagination: {
      pageSize: 12,
    },
  });

  const dataGrid = useDataGrid<IAccount>({
    resource: "journalLine/ledger",
    pagination: {
      pageSize: 12,
    },
  });

I want to be able to pass custom options to queryParams, for e.g. ?accountId=123 when the API call is made. How can I do this? Any help is really appreciated 🙏

3 Replies

kapa.ai•2mo ago

Hi @Santosh Bhandari. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello 👋 To pass custom query parameters to the useDataGrid hook, you can utilize the meta property. The meta property allows you to pass additional information to data provider methods, which can be used to customize the API call. Here's how you can modify your code to include custom query parameters:

const dataGrid = useDataGrid<IAccount>({
  resource: "journalLine/ledger",
  pagination: {
    pageSize: 12,
  },
  meta: {
    queryParams: {
      accountId: 123,
    },
  },
});

const dataGrid = useDataGrid<IAccount>({
  resource: "journalLine/ledger",
  pagination: {
    pageSize: 12,
  },
  meta: {
    queryParams: {
      accountId: 123,
    },
  },
});

In your data provider, you can then access these custom query parameters and include them in the API call. Here is an example of how you might handle this in your data provider:

const myDataProvider = {
  //...
  getList: async ({ resource, pagination, sorters, filters, meta }) => {
    const queryParams = meta?.queryParams ?? {};
    const url = new URL(`${apiUrl}/${resource}`);
    
    // Add custom query parameters to the URL
    Object.keys(queryParams).forEach(key => url.searchParams.append(key, queryParams[key]));

    //...
    const { data, headers } = await httpClient.get(url.toString());
    
    return {
      data,
    };
  },
  //...
};

const myDataProvider = {
  //...
  getList: async ({ resource, pagination, sorters, filters, meta }) => {
    const queryParams = meta?.queryParams ?? {};
    const url = new URL(`${apiUrl}/${resource}`);
    
    // Add custom query parameters to the URL
    Object.keys(queryParams).forEach(key => url.searchParams.append(key, queryParams[key]));

    //...
    const { data, headers } = await httpClient.get(url.toString());
    
    return {
      data,
    };
  },
  //...
};

This way, when the useDataGrid hook makes the API call, it will include the custom query parameter ?accountId=123. For more information on the meta property, you can refer to the meta section of the General Concepts documentation (https://refine.dev/docs/guides-concepts/general-concepts/#meta-concept). I hope this helps! 🙏 If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

wise-white•2mo ago

It worked