How to Implement Pagination with Webiny Headless CMS in Vue

After copying the URL we should also store it in the .env file in our Vue app.

Now, to initialize Apollo client, modify main.js file in the src directory to look like this:

import App from './App.vue'
import { ApolloClient, InMemoryCache } from '@apollo/client/core'
import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'

const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  uri: process.env.VUE_APP_WEBINY_GRAPHQL_URL,
  cache,
  headers: {
    Authorization : `Bearer ${process.env.VUE_APP_WEBINY_GRAPHQL_TOKEN}`
  }
})

const app = createApp({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: () => h(App),
})
app.mount('#app')

Notice we have passed the URL and API token to the configuration object of ApolloClient. This will enable us to start working with our CMS in our Vue app.

Now, what we need to do is populate our Book model with content that we will use for the pagination. In the data.js file in the src directory of our app, there are over 54 book data. We can move them over to our CMS by manually adding them as entries to our Book model on the Admin page.

Implement Cursor-based pagination

For implementing Cursor-based pagination Webiny headless CMS GraphQL API includes a limit and after argument. limit takes an integer that indicates the number of contents we wich to return in every request and after take a string which is the cursor of the last content returned. By specifying a cursor in the after argument, the returned result will be the contents after the specified cursor.

Using the above, we need to create a query that will be able to receive a limit and after argument and also return the cursor of the last returned content.

In the App.vue file, first, add the following imports within the <script> tag:

import {ref, watch} from 'vue'
import gql from 'graphql-tag'
import { useQuery } from '@vue/apollo-composable'

Next, add the following query after the imports:

const LIST_BOOKS = gql`
  query GetBooks ($limit: Int, $after: String){
    listBooks (limit: $limit, after: $after){
      data {
        id
        authors
        image
        publishDate
        publisher
        title
      }
      meta {
        cursor
        hasMoreItems
      }
    }
  }
`

Above, we have added a data field for getting content in our Book model and meta for working with pagination.

Next, in the setup() hook after the books variable, add the following reactive states, and useQuery hooks for sending query requests and returning the result and properties needed for working with GraphQL.

const cursors = ref([null])
const page = ref(0)
const variables = ref({
  limit: 10,
  after: null
})

const {result, loading, error} = useQuery(LIST_BOOKS, variables)

Above we have set limit to 10 and after to null. By doing this, when our app loads which means we are on the first page(page.value = 0), the returned results will be the first ten(10) contents in our Book model. To get the appropriate results on subsequent pages (page.value > 0) we will be setting after to the cursor returned in the request which can be accessed with result.listBooks.meta.cursor.

Notice that above, variables is a reactive state. It is so in order to make the useQuery hook re-run when one of the properties of variables is changed. Moving forward, we will be taking advantage of this to fetch and display the appropriate results after modifying the after property.

Next, let’s expose the state to be used in our template by modifying the return statement in the setup() hook to look like the following:

return {
  result,
  loading,
  error,
  page
}

Next, let's replace the currently displayed data in our app with the one coming from our CMS and also handle errors that might occur. To do this, modify the <template> element to look like the following:

<template>
  <div class='books' v-if="!loading && result?.listBooks.data">
    <Book
      :key="book.id" 
      v-for="book in result?.listBooks.data"
      :title="book.title"
      :image="book.image"
      :authors="book.authors"
      :publisher="book.publisher"
      :publishDate="book.publishedDate"
      :id="book.id"
    />
  </div>
  <div v-else class='center'>
    <div v-if="loading">Loading...</div>
    <p v-else-if="error">
      UNABLE TO FETCH DATA
    </p>
  </div>
</template>

Now to set the cursors array state with the cursor needed to get the next page results and to get the results for the next, previous page, add the following lines of code after the useQuery hook:

watch(result, (result) => {
  const pointer = result?.listBooks?.meta?.cursor
  if(!loading.value && pointer !== cursors.value[page.value]){
    cursors.value = [...cursors.value, pointer]
  }
})

watch(page, (page) => {
  variables.value.after = cursors.value[page]
})

Next, let’s add the button needed to navigate between pages. Add the following lines of code before closing </template> tag:

<div class='buttons' v-if="!loading">
  <button @click="page--">Prev</button>
  <button @click="page++">Next</button>
</div>

In the above code, we have included a previous button that decreases the page state by one and a next button to increase it by one. By modifying the page state the watch() function used to keep tabs on the page state will run, setting the value of after to the cursor needed to get the appropriate results which will then make the useQuery hook to re-run.

Now, when we head over to our app in the browser we will see the following button for navigating between pages:

Now, when we head over to our app in the browser we will see the following button for navigating between pages:

<div class='buttons' v-if="!loading">
    <button 
      :disabled="page === 0 && true"
      :style="{backgroundColor: `${page === 0 ? 'gray' : '#6796ec'}`}"
      @click="page--">Prev</button>
    <button 
      :disabled="!result?.listBooks.meta?.hasMoreItems && true"
      :style="{backgroundColor: `${result?.listBooks.meta?.hasMoreItems ? '#6796ec' : 'gray'}`}"
      @click="page++">Next</button>
  </div>