broad-brown•3mo ago

Prevent resource entry from displaying in sider menu

I'm using the <ThemedLayoutV2> component, which is automatically rendering menu items for each resource entry passed to refine. Is there a way to define a resource entry such that a menu item is not created?

5 Replies

kapa.ai•3mo ago

Hi @HypnoticMeat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To prevent a resource entry from displaying in the sider menu when using the <ThemedLayoutV2> component, you can use the meta.hide property of the resource. This property ensures that the resource is hidden from the menu but still accessible via its URL. Here's an example of how to define a resource entry such that a menu item is not created:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/mui";  // or "@refinedev/antd", "@refinedev/mantine", "@refinedev/chakra-ui" based on your UI framework

const App: React.FC = () => {  
  return (  
    <Refine  
      resources={[  
        {  
          name: "posts",  
          list: "/posts",  
          meta: {  
            label: "Posts",  
            icon: "📝",  
          },  
        },  
        {  
          name: "users",  
          list: "/users",  
          meta: {  
            // Users resource will be hidden from the menu but will be accessible via the URL  
            hide: true,  
          },  
        },  
      ]}  
    >  
      <ThemedLayoutV2>  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/mui";  // or "@refinedev/antd", "@refinedev/mantine", "@refinedev/chakra-ui" based on your UI framework

const App: React.FC = () => {  
  return (  
    <Refine  
      resources={[  
        {  
          name: "posts",  
          list: "/posts",  
          meta: {  
            label: "Posts",  
            icon: "📝",  
          },  
        },  
        {  
          name: "users",  
          list: "/users",  
          meta: {  
            // Users resource will be hidden from the menu but will be accessible via the URL  
            hide: true,  
          },  
        },  
      ]}  
    >  
      <ThemedLayoutV2>  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

In this example, the users resource will not appear in the sider menu because of the meta.hide: true property. For more details, you can refer to the official documentation (https://refine.dev/docs/guides-concepts/faq/#how-to-hide-items-from-the-sider-component) and core component documentation (https://refine.dev/docs/core/refine-component/#hide). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

broad-brown•3mo ago

@kapa.ai is it possible to use the useDelete hook and have it invalidate a call to useCustom?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, it is possible to use the useDelete hook and have it invalidate a call to useCustom. To achieve this, you can use the invalidateQueries method from the useQueryClient hook provided by the @tanstack/react-query library. Here's a step-by-step guide on how to do this: 1. Set up the useDelete hook: Use the useDelete hook to delete a record. 2. Set up the useCustom hook: Use the useCustom hook to send custom query requests. 3. Invalidate the custom query: Use the invalidateQueries method from the useQueryClient hook to invalidate the custom query after the delete mutation is completed. Here is an example:

import { useDelete, useCustom, useApiUrl } from "@refinedev/core";
import { useQueryClient } from "@tanstack/react-query";

const MyComponent: React.FC = () => {
    const queryClient = useQueryClient();
    const apiUrl = useApiUrl();

    // Set up the useDelete hook
    const { mutate: deleteMutate } = useDelete();

    // Set up the useCustom hook
    const { data, isLoading } = useCustom({
        url: `${apiUrl}/custom-endpoint`,
        method: "get",
        queryOptions: {
            queryKey: ["custom-key"],
        },
    });

    // Function to handle delete and invalidate custom query
    const handleDelete = (id: number) => {
        deleteMutate(
            {
                resource: "posts",
                id,
            },
            {
                onSuccess: () => {
                    // Invalidate the custom query after successful deletion
                    queryClient.invalidateQueries(["custom-key"]);
                },
            }
        );
    };

    return (
        <div>
            <button onClick={() => handleDelete(1)}>Delete Post</button>
            {isLoading ? <p>Loading...</p> : <p>Data: {JSON.stringify(data)}</p>}
        </div>
    );
};

import { useDelete, useCustom, useApiUrl } from "@refinedev/core";
import { useQueryClient } from "@tanstack/react-query";

const MyComponent: React.FC = () => {
    const queryClient = useQueryClient();
    const apiUrl = useApiUrl();

    // Set up the useDelete hook
    const { mutate: deleteMutate } = useDelete();

    // Set up the useCustom hook
    const { data, isLoading } = useCustom({
        url: `${apiUrl}/custom-endpoint`,
        method: "get",
        queryOptions: {
            queryKey: ["custom-key"],
        },
    });

    // Function to handle delete and invalidate custom query
    const handleDelete = (id: number) => {
        deleteMutate(
            {
                resource: "posts",
                id,
            },
            {
                onSuccess: () => {
                    // Invalidate the custom query after successful deletion
                    queryClient.invalidateQueries(["custom-key"]);
                },
            }
        );
    };

    return (
        <div>
            <button onClick={() => handleDelete(1)}>Delete Post</button>
            {isLoading ? <p>Loading...</p> : <p>Data: {JSON.stringify(data)}</p>}
        </div>
    );
};

In this example: - The useDelete hook is used to delete a record from the posts resource. - The useCustom hook is used to fetch data from a custom endpoint. - After the delete mutation is successfully completed, the invalidateQueries method is called to invalidate the custom query with the key ["custom-key"]. For more information, you can refer to the useDelete documentation (https://refine.dev/docs/data/hooks/use-delete/) and the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/#how-to-invalidate-the-custom-query). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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