I want to query more than one resource for Select using useSelect

I want to query more than one resource for Select using useSelect, how do I do that?

5 Replies

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useSelect hook in Refine is designed to fetch data from a single resource and use it as options for a select input. However, if you want to fetch data from multiple resources, you can use multiple instances of useSelect hook, each for a different resource. Here is an example of how you can use multiple useSelect hooks:

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

const Component: React.FC = () => {  
  const { options: categories } = useSelect({  
    resource: "categories",  
  });  

  const { options: products } = useSelect({  
    resource: "products",  
  });  

  // Now you have categories and products fetched from their respective resources
  // You can use them in your select inputs or any other components
};

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

const Component: React.FC = () => {  
  const { options: categories } = useSelect({  
    resource: "categories",  
  });  

  const { options: products } = useSelect({  
    resource: "products",  
  });  

  // Now you have categories and products fetched from their respective resources
  // You can use them in your select inputs or any other components
};

Remember that each instance of useSelect will trigger a separate query to fetch data from the specified resource. If you want to optimize this behavior, you can use the staleTime option in the queryOptions to avoid refetching data when the component re-renders or when a new instance of the component is created. Here is an example:

const { selectProps } = useSelect({
    resource: "resource",
    defaultValue: props.value,
    optionValue: "id",
    optionLabel: "title",
    queryOptions: {
      staleTime: 1000
    }
});

const { selectProps } = useSelect({
    resource: "resource",
    defaultValue: props.value,
    optionValue: "id",
    optionLabel: "title",
    queryOptions: {
      staleTime: 1000
    }
});

This will make the query results stay fresh for 1000 milliseconds, and during this time, any new instances of the component will reuse the existing data instead of triggering a new query (source (https://github.com/refinedev/refine/issues/1815)). For more information on how to use the useSelect hook, you can refer to the documentation: - useSelect documentation (https://refine.dev/docs/data/hooks/use-select) - Ant Design useSelect (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select/) - Mantine useSelect (https://refine.dev/docs/ui-integrations/mantine/hooks/use-select/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

multiple-amethyst•5mo ago

@kapa.ai Can I use useSelect not on resource but on __type (Enum) in GraphQL?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useSelect hook in Refine is designed to fetch data from a resource and use it as options for a select input. It's not directly designed to work with GraphQL __type (Enum), as it expects a resource name to fetch the data. However, you can create a custom hook that uses the useQuery hook to fetch the enum values from your GraphQL API and format them in a way that can be used as options for a select input. Here is an example of how you can create such a hook:

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

const useEnum = (enumName: string) => {
  const { data } = useQuery({
    query: `
      query {
        __type(name: "${enumName}") {
          enumValues {
            name
          }
        }
      }
    `,
  });

  const options = data?.__type?.enumValues?.map((value: any) => ({
    label: value.name,
    value: value.name,
  }));

  return { options };
};

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

const useEnum = (enumName: string) => {
  const { data } = useQuery({
    query: `
      query {
        __type(name: "${enumName}") {
          enumValues {
            name
          }
        }
      }
    `,
  });

  const options = data?.__type?.enumValues?.map((value: any) => ({
    label: value.name,
    value: value.name,
  }));

  return { options };
};

You can then use this hook in your component like this:

const Component: React.FC = () => {
  const { options } = useEnum("YourEnumName");

  // Now you can use the options in your select input
};

const Component: React.FC = () => {
  const { options } = useEnum("YourEnumName");

  // Now you can use the options in your select input
};

Please replace "YourEnumName" with the actual name of your enum. Remember that this is a custom solution and might need adjustments based on your GraphQL API and your requirements. For more information on how to use the useQuery hook, you can refer to the useQuery documentation (https://refine.dev/docs/data/hooks/use-query). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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