Getting Documents

Single Document

query singleDocument($id: String!) {
  document(documentId: $id) {
    id
    description
    labels
    # ...
  }
}

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

Document List

the base query looks like this:

query documentsList($after: String, $folderId: String) {
  documents(first: 25, after: $after, filter: { folderId: $folderId }) {
    pageInfo {
      hasNextPage
      endCursor
    }
    edges {
      cursor
      node {
        id
        description
        labels
        # ...
      }
    }
  }
}

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

Where both folderId 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.

If you pass in no folderId it is equivalent to the All Memos page in the Webapp, where you get all documents you have access on. Ff you pass in a folderId then you will get all documents that are directly in that folder.

info

More Filter Options can be seen at: DocumentFilterInput

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.

/*
  Note the SingleDocumentFragment. its a GraphQL Fragment.
  Useful when always using the same fields on a specific type.
*/
const DOCUMENTS = gql`
  ${SingleDocumentFragment}
  query DocumentList(
    $folderId: String
    $after: String
    $first: Int!
    $sortOrderBy: DocumentSortAfter!
    $sortDirection: SortDirection!
  ) {
    documents(
      filter: { folderId: $folderId }
      first: $first
      after: $after
      sortDirection: $sortDirection
      sortAfter: $sortOrderBy
    ) {
      pageInfo {
        endCursor
        hasNextPage
      }
      edges {
        cursor
        node {
          id
          ...SingleDocumentFragment
        }
      }
    }
  }
`;

const DocumentsList = ({ folderId }) => {
  const { data, fetchMore, loading } = useQuery(FOLDERS, {
    fetchPolicy: "cache-and-network",
    variables: {
      first: 25,
      folderId,
      sortDirection: "DESC",
      sortOrderBy: "UPLOADED_AT",
    },
  });

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