Skip to main content

@pagination

By attaching the pagination directive, you indicate to Nau that this is a connection for pagination.

Nau will determine fields you have not written in your query (e.g. the pageInfo field) and add them if necessary. It also generates some TypeScript code for caching.

For example, let's look at a following query:

query TestQuery($cursor: String) {
viewer {
items(first: 1, after: $cursor) @pagination {
edges {
node {
name
}
}
}
}
}

Nau will rewrite the query as follows:

query TestQuery($cursor: String) {
viewer {
items(first: 1, after: $cursor) @pagination {
edges {
node {
name
id
__typename
}
cursor
}
pageInfo {
hasNextPage
endCursor
hasPreviousPage
startCursor
}
_connectionId @client
}
id
__typename
}
}