GraphQL Query to load older todos

Firstly, we need to modify our first FETCH_TODOS query such that it fetches only 10 items on first load. To do that, just add the limit argument to it. Go to src/screens/components/Todos and add the limit argument and set it to 10.

githubTodos.js
query ($isPublic: Boolean) {
todos (
order_by: {
created_at: desc
},
where: { is_public: { _eq: $isPublic} },
+ limit: 10
) {
id
title
is_completed
created_at
is_public
user {
name
}
}
}

Now the above GraphQL query would fetch only the last 10 todos.

Now let us write the query to load older todos:

query ($lastId: Int, $isPublic: Boolean){
todos (
order_by: {
id: desc
},
where: {
_and: {
is_public: { _eq: $isPublic},
id: { _lt: $lastId}
}
},
limit: 10
) {
id
title
is_completed
created_at
is_public
user {
name
}
}
}

What does this query do?

This query fetches all the todos which have an id greater than the value coming from the variable $lastId and which have is_public equal to the value of $isPublic in variables.

Let us go ahead and integrate this now.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin