Getting Folders

info

In belows examples are only the essentials returned. If you want to get more/other information, please have a look at the FolderType

Single Folder

query singleFolder($id: String!) {
  folder(id: $id) {
    id
    name
    description
    labels
    # ...
  }
}

// variables
{
  "id": "..."
}

Multiple Folders

query multipleFolders($ids: [String]!) {
  foldersById(ids: $ids) {
    edges {
      node {
        id
        name
        description
        labels
        # ...
      }
    }
  }
}

// variables
{
  "ids": ["...", "..."]
}

Folder List

the base query looks like this:

query folderList($parentId: String, $after: String) {
  folders(first: 25, filter: { parentId: $parentId }, after: $after) {
    pageInfo {
      hasNextPage
      endCursor
    }
    edges {
      cursor
      node {
        id
        name
        description
        labels
        # ...
      }
    }
  }
}

// variables
{
  "after": "...", // optional
  "parentId": "..." // optional
}

Where both parentId and after are optional. When the hasNextPage is true, you can then pass in the value from endCusor to after to get the next page.

The parentId is included here as well, as it is kind of special. If it is not set, then it will return any folder on any folder level where the user has access to. If you set parentId to an empty string, then it will return all folders that the user would see on the first level. And of course when you pass in a folderId it will return all the subfolders of that folder.

to get the documents of those folders please see Getting Documents

info

More Filter Options can be seen at: FolderFilterInput

Example from within a React App

warning

this is not a fully functional example, but a over simplified version of what we actually are doing in our app. So it should give you a fairly good hint on how it should work from a conceptual level.

import { gql, useQuery } from "@apollo/client";

const FOLDERS = gql`
  query FolderList(
    $parentId: String
    $first: Int!
    $after: String
    $labels: [String]
    $text: String
    $sortDirection: SortDirection
    $sortOrderBy: FolderSortAfter
  ) {
    folders(
      filter: { parentId: $parentId, labels: $labels, text: $text }
      first: $first
      after: $after
      sortDirection: $sortDirection
      sortAfter: $sortOrderBy
    ) {
      pageInfo {
        endCursor
        hasNextPage
      }
      edges {
        node {
          id
          name
          emoteIcon
          hasSubfolders
          breadcrumb {
            id
            name
            emoteIcon
          }
        }
      }
    }
  }
`;

const FOLDER_SINGLE = gql`
  query SingleFolder($folderId: String!) {
    folder(id: $folderId) {
      id
      name
      emoteIcon
      hasSubfolders
      parentId
      breadcrumb {
        id
        name
      }
    }
  }
`;

const FolderSelection = () => {
  const [searchText, setSearchText] = useState("");
  const [folderId, setFolderId] = useState("");
  const { data, fetchMore, loading } = useQuery(FOLDERS, {
    fetchPolicy: "cache-and-network",
    variables: {
      first: 25,
      parentId: folderId,
      text: searchText,
      sortDirection: "ASC",
      sortOrderBy: "ALPHABETICALLY",
    },
  });
  const { data: folderData } = useQuery(FOLDER_SINGLE, {
    fetchPolicy: "cache-only",
    variables: {
      folderId,
    },
    skip: !folderId,
  });

  const onLoadMoreContent = useCallback(async () => {
    if (
      loading ||
      !data?.folders?.pageInfo?.endCursor ||
      !data?.folders?.pageInfo?.hasNextPage ||
      !fetchMore
    ) {
      return;
    }
    await fetchMore({
      variables: {
        after: data.folders.pageInfo.endCursor,
        first: 25,
      },
    });
  }, [loading, fetchMore, data]);

  const onClickFolderItem = (folderId) => {
    setFolderId(folderId);
    setSearchText("");
  };

  return (
    <Modal>
      <Button
        disabled={!folderData?.folder}
        onClick={() => {
          if (folderData?.folder) {
            return;
          }
          setFolderId(folderData.folder.parentId || "");
        }}
      >
        Go Back
      </Button>
      <VirtualList
        folders={folderData?.folders}
        onClick={onClickFolderItem}
        onLoadMoreContent={onLoadMoreContent}
      />
    </Modal>
  );
};

export default FolderSelection;