Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Next.js & Apollo GraphQL: Using fetchMore()
1.
2. Step 1 - Compose the List page Component with the Query
List Page Query
List Page
Component
itemTypes {
id,
name
}
3. Step 2 - Fetch first page with page 1 as default & render
List Page Query
List Page
Component
[
ItemType,
ItemType,
ItemType,
…
]
itemTypes {
id,
name
}
{
page: 1
}
props
LOAD MORE
4. Step 3 - Pass a function along props, with a reference to Query fetchMore
List Page Query
List Page
Component
[
ItemType,
ItemType,
ItemType,
…
]
itemTypes {
id,
name
}
{
page: 1
}
props
LOAD MORE
fetchMore()
5. Step 4 - User clicks pager, update variables, launch fetchMore()
List Page Query
List Page
Component
[
ItemType,
ItemType,
ItemType,
…
]
itemTypes {
id,
name
}
{
page: 2
}
props
fetchMore()
LOAD MORE
6. Step 5 - Same Query but with updated variables is fetched + loading state
List Page Query
List Page
Component
loading: true
itemTypes {
id,
name
}
{
page: 2
}
props
fetchMore()
7. Step 6 - Result is appended to displayed data, or replace it if needed
List Page Query
List Page
Component
loading: false
[
ItemType,
ItemType,
…
]
itemTypes {
id,
name
}
{
page: 2
}
props
LOAD MORE
fetchMore()