fascinating-indigo•15mo ago

How to add a resource without adding it to the sidebar?

For example, I have a classes endpoint. But I just need to make an API call to this endpoint to populate the classes field in multiple forms.

12 Replies

kapa.ai•15mo ago

Hi @soto76. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, you can use the useCustom hook in Refine to make a GET request to your classes endpoint and fetch the data you need to populate the classes field in your forms. Here's an example of how you can do this:

import { useCustom } from "@refinedev/core";

const { data } = useCustom({
    url: "your_classes_endpoint_url",
    method: "get",
    config: {
        // Additional config like headers, query parameters, etc.
    },
});

import { useCustom } from "@refinedev/core";

const { data } = useCustom({
    url: "your_classes_endpoint_url",
    method: "get",
    config: {
        // Additional config like headers, query parameters, etc.
    },
});

In this example, replace "your_classes_endpoint_url" with the actual URL of your classes endpoint. The data variable will then contain the response from your API, which you can use to populate the classes field in your forms. Please note that this is a simplified example and you might need to adjust it based on your specific requirements and the structure of your API response. For more information, you can refer to the Refine documentation (https://refine.dev/docs). (Source: Discord support thread: To hit an endpoint (get call),what hook I should use. I am using refine dev antd.plz help refine > Answers (https://discord.com/channels/837692625737613362/1111639313340440678)) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

fascinating-indigoOP•15mo ago

@kapa.ai instead of useCustom, can I use the useAutocomplete hook to get the data?

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useAutocomplete hook to fetch data from your classes endpoint and use it to populate the classes field in your forms. The useAutocomplete hook is particularly useful when records in a resource need to be used as select options. Here's an example of how you can use the useAutocomplete hook:

import { useAutocomplete } from "@refinedev/mui";  
import { Autocomplete, TextField } from "@mui/material";  

interface IClass {  
 id: number;  
 title: string;  
}  

const FormComponent: React.FC = () => {  
 const { autocompleteProps } = useAutocomplete<IClass>({  
 resource: "classes",  
 defaultValue: 11,  
 });  

 return (  
 <Autocomplete  
 {...autocompleteProps}  
 getOptionLabel={(item) => item.title}  
 isOptionEqualToValue={(option, value) =>  
 value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()  
 }  
 placeholder="Select a class"  
 renderInput={(params) => (  
 <TextField  
 {...params}  
 label="Class"  
 margin="normal"  
 variant="outlined"  
 required  
 />  
 )}  
 />  
 );  
};

import { useAutocomplete } from "@refinedev/mui";  
import { Autocomplete, TextField } from "@mui/material";  

interface IClass {  
 id: number;  
 title: string;  
}  

const FormComponent: React.FC = () => {  
 const { autocompleteProps } = useAutocomplete<IClass>({  
 resource: "classes",  
 defaultValue: 11,  
 });  

 return (  
 <Autocomplete  
 {...autocompleteProps}  
 getOptionLabel={(item) => item.title}  
 isOptionEqualToValue={(option, value) =>  
 value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()  
 }  
 placeholder="Select a class"  
 renderInput={(params) => (  
 <TextField  
 {...params}  
 label="Class"  
 margin="normal"  
 variant="outlined"  
 required  
 />  
 )}  
 />  
 );  
};

In this example, replace "classes" with your endpoint and modify the data as needed. The useAutocomplete hook fetches data using the useList hook, so when the data is updated, the Autocomplete field will be updated as well. For more information, you can refer to the Refine documentation (https://refine.dev/docs). (Source: Discord support thread: Edit page fetch (https://discord.com/channels/837692625737613362/1136971386833870921), Documentation > Docs > Api-reference > Mui > Hooks > useAutocomplete (https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/)) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

fascinating-indigoOP•15mo ago

@kapa.ai I have this code, where I replaced "classes" with my endpoint. It doesn't look right, because I didn't add classes to resources prop in the Refine component. But useList uses the resource prop, so how do I fetch data?

  const { autocompleteProps } = useAutocomplete({
    resource: "http://localhost:8000/classes",
  });

  const { autocompleteProps } = useAutocomplete({
    resource: "http://localhost:8000/classes",
  });

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The resource prop in the useAutocomplete hook is typically used to specify the name of the resource, not the full URL of the endpoint. This resource name is then used by the useList hook to fetch data from the correct endpoint, based on how you've configured your data provider. If you want to fetch data from a specific endpoint that's not included in your resources, you might need to create a custom data provider that handles this specific case. In your data provider's getList method, you can check the resource parameter and if it matches your specific case (e.g., "http://localhost:8000/classes"), you can make a request to this specific endpoint. Here's an example of how you can do this:

const myDataProvider = {  
 getList: async ({ resource, pagination, sorters, filters, meta }) => {  
  let url;
  if (resource === "<http://localhost:8000/classes">) {
    url = resource;
  } else {
    url = `${apiUrl}/${resource}`;
  }
  const headers = meta?.headers ?? {};  
  const { data, headers } = await httpClient.get(`${url}`, { headers });  
  return { data };  
 },  
 //...  
};

const myDataProvider = {  
 getList: async ({ resource, pagination, sorters, filters, meta }) => {  
  let url;
  if (resource === "<http://localhost:8000/classes">) {
    url = resource;
  } else {
    url = `${apiUrl}/${resource}`;
  }
  const headers = meta?.headers ?? {};  
  const { data, headers } = await httpClient.get(`${url}`, { headers });  
  return { data };  
 },  
 //...  
};

And when you use useAutocomplete, you can pass the fromAutocomplete flag in the meta property:

useAutocomplete({  
 resource: "<http://localhost:8000/classes",>  
});

useAutocomplete({  
 resource: "<http://localhost:8000/classes",>  
});

Please note that this is a custom solution and you need to implement it according to your own requirements. The meta property is flexible and allows you to pass any additional information you need. For more information, you can refer to the Refine documentation (https://refine.dev/docs). (Source: Discord support thread: Turn on filters (https://discord.com/channels/837692625737613362/1125743357088501761)) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

harsh-harlequin•15mo ago

Hello @soto76 did you check our documentation? See the example here. https://refine.dev/docs/examples/field/useAutocomplete/ Generally, you can use resource prop to our hooks to fetch data of the resource.

useAutocomplete | refine

This example shows how to use the useAutocomplete hook.

fascinating-indigoOP•15mo ago

Hi @batuhanw , no I don't want to use the resource prop because I didn't add "classes" as a resource. I just want to make a request to the classes endpoint without adding it as a resource and with using the useAutocomplete hook. Is that possible? or is there a way to add "classes" as a resource, but hide it on the sidebar?

harsh-harlequin•15mo ago

Yes, you can hide resources on the side bar. please search documentation first. Ask question if you can't find answer there. THanks. https://refine.dev/docs/api-reference/core/components/refine-config/#hide

| refine

`` component is the entry point of a refine app. It is where the highest level of configuration of the app occurs.

fascinating-indigoOP•15mo ago

Thanks, I really did try finding it in the documentation and came to this thread as a last resort. But I guess my search skills are bad and I need to work on it. @batuhanw oh wait, I remember seeing this but I got confused cuz I thought sider was depracated? nvmd it works! thank you

How to add a resource without adding it to the sidebar?

Did you find this page helpful?