How can i use query params for fetching?

I have this code:

import { NumberField, Show, TextField } from "@refinedev/antd";
import { useShow } from "@refinedev/core";
import { Typography } from "antd";

const { Title } = Typography;

interface IProduct {
  store_id: number;
  name: string;
  postalcode: number;
}

export const StoreShow = () => {
  const { queryResult } = useShow<IProduct>({
  });
  const { data, isLoading } = queryResult;

  const record = data?.data;

  return (
    <Show isLoading={isLoading}>
      <Title level={5}>{"ID"}</Title>
      <NumberField value={record?.store_id ?? ""} />
      <Title level={5}>{"Title"}</Title>
      <TextField value={record?.name} />
    </Show>
  );
};

Its making the request to localhost/stores/4 (being 4 an exmaple id) when it should be localhost/searchstore?store_id=4

14 Replies

kapa.ai•10mo ago

Hi @celu99. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can use the useGetOne hook to fetch a single record using query parameters. However, the useShow hook you're currently using is designed to fetch a single record based on the id in the URL path, not a query parameter. Here's an example of how you can use useGetOne to fetch a record using a query parameter:

import { Show, TextField, NumberField } from "@refinedev/antd";
import { useGetOne } from "@refinedev/core";
import { Typography } from "antd";

const { Title } = Typography;

interface IProduct {
  store_id: number;
  name: string;
  postalcode: number;
}

export const StoreShow = () => {
  const { data, isLoading } = useGetOne<IProduct>({
    resource: "searchstore",
    id: "", // No id in the path
    query: {
      filter: { store_id: 4 }, // Your query parameter
    },
  });

  const record = data?.data;

  return (
    <Show isLoading={isLoading}>
      <Title level={5}>{"ID"}</Title>
      <NumberField value={record?.store_id ?? ""} />
      <Title level={5}>{"Title"}</Title>
      <TextField value={record?.name} />
    </Show>
  );
};

import { Show, TextField, NumberField } from "@refinedev/antd";
import { useGetOne } from "@refinedev/core";
import { Typography } from "antd";

const { Title } = Typography;

interface IProduct {
  store_id: number;
  name: string;
  postalcode: number;
}

export const StoreShow = () => {
  const { data, isLoading } = useGetOne<IProduct>({
    resource: "searchstore",
    id: "", // No id in the path
    query: {
      filter: { store_id: 4 }, // Your query parameter
    },
  });

  const record = data?.data;

  return (
    <Show isLoading={isLoading}>
      <Title level={5}>{"ID"}</Title>
      <NumberField value={record?.store_id ?? ""} />
      <Title level={5}>{"Title"}</Title>
      <TextField value={record?.name} />
    </Show>
  );
};

This will make a request to localhost/searchstore?filter[store_id]=4. Please note that the server should be set up to handle this type of request. The server should interpret the filter[store_id] query parameter and return the corresponding record. For more information, you can check the refine documentation (https://refine.dev/docs/api-references/hooks/data/usegetone). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

protestant-coralOP•10mo ago

usegetone does not exist in refine how could i solve it? @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @celu99, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

protestant-coralOP•10mo ago

@kapa.ai

kapa.ai•10mo ago

protestant-coralOP•10mo ago

can this be implemented with filters? @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use filters in refine to fetch data based on certain conditions. The useList hook in refine accepts a filters property which is an array of objects with field, operator, and value properties. Here's an example of how you can use useList with filters:

import { useList } from "@refinedev/core";  
  
const MyComponent = () => {  
 const { data } = useList({  
 resource: "searchstore",  
 filters: [  
 {  
 field: "store_id",  
 operator: "eq",  
 value: 4,  
 },  
 ],  
 });  
};

import { useList } from "@refinedev/core";  
  
const MyComponent = () => {  
 const { data } = useList({  
 resource: "searchstore",  
 filters: [  
 {  
 field: "store_id",  
 operator: "eq",  
 value: 4,  
 },  
 ],  
 });  
};

In this example, the useList hook will make a request to localhost/searchstore?filter[store_id][eq]=4. The server should be set up to interpret this filter and return the corresponding records. Please note that the availability of operators depends on the data provider you're using. Refine supports 20+ operators for filtering your data. For more information, you can check the refine documentation (https://refine.dev/blog/react-admin-vs-refine#filtering). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

protestant-coralOP•10mo ago

if now i'm having

import { NumberField, Show, TextField } from "@refinedev/antd";
import { useShow, useList } from "@refinedev/core";
import { Typography } from "antd";

const { Title } = Typography;

interface IProduct {
  store_id: number;
  name: string;
  postalcode: number;
}

export const StoreShow = () => {
  //const { queryResult } = useShow<IProduct>({});

  const queryResult = useList({
    resource: "searchstore",
    filters: [
      {
        field: "store_id",
        operator: "eq",
        value: 4,
      },
    ],
  });

  const { data, isLoading } = queryResult;

  const record = data?.[0];

  return (
    <Show isLoading={isLoading}>
      <Title level={5}>{"ID"}</Title>
      <NumberField value={record?.store_id ?? ""} />
      <Title level={5}>{"Name"}</Title>
      <TextField value={record?.name} />
    </Show>
  );
};

Assuming is returning just one json in the array how do i display naame and id? @kapa.ai

kapa.ai•10mo ago

protestant-coralOP•10mo ago

@kapa.ai if now i'm having import { NumberField, Show, TextField } from "@refinedev/antd"; import { useShow, useList } from "@refinedev/core"; import { Typography } from "antd"; const { Title } = Typography; interface IProduct { store_id: number; name: string; postalcode: number; } export const StoreShow = () => { //const { queryResult } = useShow<IProduct>({}); const queryResult = useList({ resource: "searchstore", filters: [ { field: "store_id", operator: "eq", value: 4, }, ], }); const { data, isLoading } = queryResult; const record = data?.[0]; return ( <Show isLoading={isLoading}> <Title level={5}>{"ID"}</Title> <NumberField value={record?.store_id ?? ""} /> <Title level={5}>{"Name"}</Title> <TextField value={record?.name} /> </Show> ); }; Assuming is returning just one json in the array how do i display naame and id?

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Your code is almost correct. The useList hook returns an array of records, so you need to access the first record in the array using data?.data[0]. Here's how you can display the name and id:

import { NumberField, Show, TextField } from "@refinedev/antd";
import { useList } from "@refinedev/core";
import { Typography } from "antd";

const { Title } = Typography;

interface IProduct {
  store_id: number;
  name: string;
  postalcode: number;
}

export const StoreShow = () => {
  const { data, isLoading } = useList<IProduct>({
    resource: "searchstore",
    filters: [
      {
        field: "store_id",
        operator: "eq",
        value: 4,
      },
    ],
  });

  const record = data?.data[0];

  return (
    <Show isLoading={isLoading}>
      <Title level={5}>{"ID"}</Title>
      <NumberField value={record?.store_id ?? ""} />
      <Title level={5}>{"Name"}</Title>
      <TextField value={record?.name} />
    </Show>
  );
};

import { NumberField, Show, TextField } from "@refinedev/antd";
import { useList } from "@refinedev/core";
import { Typography } from "antd";

const { Title } = Typography;

interface IProduct {
  store_id: number;
  name: string;
  postalcode: number;
}

export const StoreShow = () => {
  const { data, isLoading } = useList<IProduct>({
    resource: "searchstore",
    filters: [
      {
        field: "store_id",
        operator: "eq",
        value: 4,
      },
    ],
  });

  const record = data?.data[0];

  return (
    <Show isLoading={isLoading}>
      <Title level={5}>{"ID"}</Title>
      <NumberField value={record?.store_id ?? ""} />
      <Title level={5}>{"Name"}</Title>
      <TextField value={record?.name} />
    </Show>
  );
};

In this code, record will be the first record in the array returned by useList. The name and id are then displayed using the TextField and NumberField components from @refinedev/antd. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

How can i use query params for fetching?

Did you find this page helpful?