extended-salmon•14mo ago

Which hook i need to use for this request?

Hi I'm using the hook useOne to try to get the response of this uri: {API_URL}/getProducts?barcode=1234567890123, however when I code this: const { data, isLoading, isError } = useOne({ resource: "getProducts", id: ?barcode=${id}, }); in the explorer the api goes like these: /getProducts/?barcode=1234567890123, with an additional /

2 Replies

kapa.ai•14mo ago

Hi @gregoryinnovo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useOne hook in Refine is designed to fetch a single record from an API using a resource and an ID. By default, it constructs the API request URL in the format {API_URL}/{resource}/{id}. This is why you're seeing an additional / in your API request URL. If you need to fetch a single record using a query parameter, you might need to customize your data provider's getOne method to handle this. The getOne method can be customized to accept additional parameters or to construct the API request URL in a specific way. Here's an example of how you might customize the getOne method to accept a query parameter:

getOne: async ({ resource, id, meta }) => {  
  // Construct the URL with the query parameter
  const url = `${resource}/${id}?myQueryParam=${meta.myQueryParam}`;

  // You can handle the request according to your API requirements.  
  const response = await fetch(url);
  const data = await response.json();

  return {  
    data,  
  };  
};

getOne: async ({ resource, id, meta }) => {  
  // Construct the URL with the query parameter
  const url = `${resource}/${id}?myQueryParam=${meta.myQueryParam}`;

  // You can handle the request according to your API requirements.  
  const response = await fetch(url);
  const data = await response.json();

  return {  
    data,  
  };  
};

In this example, myQueryParam is the query parameter you want to add to the request. You can replace this with the actual query parameter you want to use. Please note that this is a simplified example and you might need to adjust it based on your actual API requirements. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/core/providers/data-provider). If you want to fetch data without specifying an id, you can use the useQuery hook from React Query. This hook is used in Refine to make API calls. Here's an example of how useQuery is used in Refine:

const queryResponse = useQuery<GetListResponse<TData>, TError>(  
 queryKey.list(config),  
 ({ queryKey, pagination, signal }) => {  
 const { pagination, meta, ...restConfig } = config || {};  
 return getList<TData>({  
 resource,  
 ...restConfig,  
 pagination,  
 meta: {  
 ...meta,  
 queryContext: {  
 queryKey,  
 pageParam,  
 signal,  
 },  
 },  
 });  
 },  
 {  
 ...queryOptions,  
 onSuccess: (data) => {  
 queryOptions?.onSuccess?.(data);  
  
 const notificationConfig =  
 typeof successNotification === "function"  
 ? successNotification(data, { metaData, config }, resource)  
 : successNotification;  
  
 handleNotification(notificationConfig);  
 },  
 onError: (err: TError) => {  
 checkError(err);  
 queryOptions?.onError?.(err);  
  
 const notificationConfig =  
 typeof errorNotification === "function"  
 ? errorNotification(err, { metaData, config }, resource)  
 : errorNotification;  
  
 handleNotification(notificationConfig, {  
 key: `${resource}-useList-notification`,  
 message: translate(  
 "common:notifications.error",  
 { statusCode: err.statusCode },  
 `Error (status code: ${err.statusCode})`,  
 ),  
 description: err.message,  
 type: "error",  
 });  
 },  
 },  
);

const queryResponse = useQuery<GetListResponse<TData>, TError>(  
 queryKey.list(config),  
 ({ queryKey, pagination, signal }) => {  
 const { pagination, meta, ...restConfig } = config || {};  
 return getList<TData>({  
 resource,  
 ...restConfig,  
 pagination,  
 meta: {  
 ...meta,  
 queryContext: {  
 queryKey,  
 pageParam,  
 signal,  
 },  
 },  
 });  
 },  
 {  
 ...queryOptions,  
 onSuccess: (data) => {  
 queryOptions?.onSuccess?.(data);  
  
 const notificationConfig =  
 typeof successNotification === "function"  
 ? successNotification(data, { metaData, config }, resource)  
 : successNotification;  
  
 handleNotification(notificationConfig);  
 },  
 onError: (err: TError) => {  
 checkError(err);  
 queryOptions?.onError?.(err);  
  
 const notificationConfig =  
 typeof errorNotification === "function"  
 ? errorNotification(err, { metaData, config }, resource)  
 : errorNotification;  
  
 handleNotification(notificationConfig, {  
 key: `${resource}-useList-notification`,  
 message: translate(  
 "common:notifications.error",  
 { statusCode: err.statusCode },  
 `Error (status code: ${err.statusCode})`,  
 ),  
 description: err.message,  
 type: "error",  
 });  
 },  
 },  
);

This example is from a Discord support thread (https://discord.com/channels/837692625737613362/1151064293022904320). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

Which hook i need to use for this request?

Did you find this page helpful?