How to use custom query ?

[kausik10]

Hi, I want to get the total number of files in that particular location.
I have id , folderId, yearId, monthId and an optional subfolderId in the URL parameters.
What I want to do is get the total Number of files in particular folder or subfolder.
Example:
If I have 4 files in folder ABC. And ABC folder contains ABC Subfolder which contains 5 files.
And if I am the location of ABC folder,

https://......../client-files-detail?id=...&yearId=.....&monthId=....&folderId=....

I should get totalNumber of files = 4

const [totalFileCount, setFileCount] = useState<number>(0);

 useEffect(() => {
        const listFiles = async () => {
            const metadata = await contentClient.query(
                queryBuilder.list(
                    "File",
                    {
                        filter: {
                            client: { id: { eq: clientId as string } },
                            folder: { id: { eq: folderId as string } },
                            year: { id: { eq: yearId as string } },
                            month: { id: { eq: monthId as string } },
                            ...(subfolderId
                                ? {
                                      subfolder: {
                                          id: { eq: subfolderId as string },
                                      },
                                  }
                                : { subfolder: null }),
                        },
                    },
                    (it) => it.$("meta", (it) => it.$("url"))
                )
            );
            setFileCount(metadata.length);
        };
        console.log("Typeof totalFileCount", typeof totalFileCount);
        listFiles();
        console.log("filecount", totalFileCount);
    }, []);
    ```
    
I want this feature because I want to show the `DataGridHasManyFilter` on the basis of the totalNumber of files in that URL..
    

{totalFileCount > 0 ? (
                                    <DataGridHasManyFilter
                                        field={"flags"}
                                        label="Filtr"
                                    >
                                        <Field field={"name"} />
                                    </DataGridHasManyFilter>
                                ) : (
                                    <p>No files found.</p>
                                )}
                                ```

I know the query is listed incorrectly.
However, if I just statically supply 0 as totalFileCount, to see if it works, I still can see the DataGridHasManyFilter in my UI. which is weird!

Could you help me write a proper graphql query and provide relevant documentation regarding it because I don't seem to find it properly listed in contember docs. I only see things regarding listMODEL_NAME paginateMODEL_NAME getMODEL_NAME and have used it in my next-js frontend for this project.

Thank you!

[kausik10]

I have identified that the issue is with metadata.length, however I am not sure about how to fix it, also what should be passed inside the dependency array of the useEffect, if I pass the totalFileCount, I get random values..

[jonasnobile]

You can use queryBuilder.count instead of queryBuilder.list to get the number of entities.

[kausik10]

Hi,

 const listFiles = async () => {
        let metadata;
        if (folderId && !subfolderId) {
            metadata = await contentClient.query(
                queryBuilder.count("FileFolder", {
                    filter: {
                        clientId: { eq: clientId as string },
                        yearId: { eq: yearId as string },
                        monthId: { eq: monthId as string },
                        folderId: { eq: folderId as string },
                    },
                })
            );
        } else {
            metadata = await contentClient.query(
                queryBuilder.count("FileSubfolder", {
                    filter: {
                        clientId: { eq: clientId as string },
                        yearId: { eq: yearId as string },
                        monthId: { eq: monthId as string },
                        folderId: { eq: folderId as string },
                        subfolderId: { eq: subfolderId as string },
                    },
                })
            );
        }

        setFileCount(metadata);
        // console.log("Updated file count:", fileCount);
    };
    useEffect(() => {
        listFiles();
    }, [clientId, folderId, yearId, monthId, subfolderId, fileCount]);

   
     {fileCount > 0 && (
                                        <DataGridHasManyFilter
                                            field={"flags"}
                                            label="Filtr"
                                        >
                                            <Field field={"name"} />
                                        </DataGridHasManyFilter>
                                  )}

The problem is as I delete the file from DataGrid, the state of fileCount is not being updated and thus I have to manually reload the page to see the effect

[jonasnobile]

Hi, the issue occurs because your fileCount isn't automatically updated when a file is deleted. You're correctly fetching fileCount in the useEffect, but since deletion doesn't trigger the dependencies you specified, the count doesn't update automatically.

A simple and effective solution is to explicitly call your listFiles function again after the delete operation succeeds, like this:

<DeleteEntityTrigger onPersistSuccess={listFiles}>
    <button>Delete file</button>
</DeleteEntityTrigger>

This way, whenever you successfully delete a file, your fileCount state will immediately reflect the changes without requiring a manual reload.

Additionally, to clarify your dependencies, you can safely remove fileCount from your useEffect dependencies to avoid unnecessary re-fetching:

useEffect(() => {
    listFiles();
}, [clientId, folderId, yearId, monthId, subfolderId]);

This ensures you only fetch the count when relevant parameters actually change, keeping your data fetching efficient.

[kausik10]

Thank you!