Integrate NuxtJS with Apito - GraphQL Tools & Database API Integration

NuxtJS is known as The Intuitive Vue Framework that integrates perfectly with Apito's GraphQL tools and database API. Nuxt is shipped with plenty of features to boost developer productivity when working with our instant API builder, and enhances the end user experience.

• Clone this repo:

git clone https://github.com/apito/nuxtjs-apito-todo-app.git
cd nuxtjs-apito-todo-app

• Install npm modules:

yarn install

• Open apollo/clientConfig.js and configure Apito's GraphQL Endpoint as follows:

  import { InMemoryCache } from "apollo-cache-inmemory";
  export default function(context){
    return {
          httpLinkOptions: {
              uri: 'https://api.apito.io/secured/graphql',
              credentials: 'same-origin'
          },
          cache: new InMemoryCache()
    }
  }

• We have defined the graphql query in apollo/queries/fetchAuthor.gql.

  • GraphQL query

  
  query {
    author {
      id
      name
    }
  }
  
  

  • In pages/index.vue, we import author query.

  
  <script>
  import author from '~/apollo/queries/fetchAuthor'
  
  export default {
    apollo: {
      author: {
        prefetch: true,
        query: author
      }
    },
    head: {
      title: 'Authors of Blog'
    }
  }
  </script>
  
  

• Run the app:

npm run dev

For detailed explanation on how things work, checkout Nuxt.js docs.