Nuxt.js Static GraphQL Queries powered by Axios

_id.vue

<template>
  <div v-if="Car">
    <h3>{{ Car.make }} {{ Car.model }}</h3>
    <img :src="Car.photoURL" :alt="`${Car.model} photo`">
    <p><nuxt-link to="/">Home page</nuxt-link></p>
  </div>
</template>

<script>
import staticData from '~/plugins/axios-ecstatic'
export default {
  async asyncData ({ params }) {
    const query = `{
      Car(id: "${params.id}") {
        make
        model
        photoURL
        price
      }
    }`
    let { data } = await staticData.post(`car/${params.id}`, { query })
    return { Car: data.data.Car }
  },
  head() {
    return {
      title: (this.Car ? `${this.Car.make} ${this.Car.model}` : 'Loading')
    }
  }
}
</script>

<style>
img {
  max-width: 600px;
}
</style>

axios-ecstatic.js

import axios from 'axios'

let baseURL = 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
let stripRequestPath = '/simple/v1/cj1dqiyvqqnmj0113yuqamkuu/'
/*
** Change base url for data when not generating or developing
*/
if (process.browser && process.static && process.env.NODE_ENV !== 'development') {
  baseURL = '/data'
}
const instance = axios.create({ baseURL })

/*
** Intercept Axios Request and change url to request static json data
*/
if (process.browser && process.static) {
  instance.interceptors.request.use((config) => {
    // Change Method from post to get for queries
    if(config.data.query && config.method === 'post'){
      config.method = 'get'
      config.url = config.url + '.json'
    }
    return config
  })
}

/*
* Intercept Axios Response and store data as json file
*/
if (process.server && process.static) {
  const mkdirp = require('mkdirp-promise')
  const { join, dirname } = require('path')
  const { writeFileSync } = require('fs')
  instance.interceptors.response.use(
    async function (response) {
      const staticData = JSON.parse(response.config.data)
      let filePath = response.request.path.replace(baseURL, "")
      filePath = filePath.replace(stripRequestPath, "")
      const path = join(process.env.ecstaticDir, filePath + '.json')
      await mkdirp(dirname(path))
      writeFileSync(path, JSON.stringify(response.data))
      return response
    }, function (error) {
      return Promise.reject(error)
    }
  )
}

export default instance

index.vue

<template>
  <section class="container">
    <ul>
      <li v-for="car in allCars" :key="car.id">
        <nuxt-link :to="`car/${car.id}`">
          {{ car.year }} {{ car.make }} {{ car.model }}
        </nuxt-link>
      </li>
    </ul>
  </section>
</template>

<script>
import staticData from '~/plugins/axios-ecstatic'
export default {
  async asyncData ({ params }) {
    const query = `{
      allCars {
        id
        make
        model
        year
      }
    }`
    let { data } = await staticData.post(`home`, { query })
    return { allCars: data.data.allCars }
  }
}
</script>

nuxt.config.js

const { join } = require('path')

module.exports = {
  // Nuxt environment variables
  env: {
    ecstaticDir: join(__dirname, 'dist/data')
  },
  generate: {
    routes: [
      '/car/cj1ds6g8pnzua0150ekfnmmwe',
      '/car/cj1ds83ulnuxz01144k4rrwru',
      '/car/cj1ds2x4snt290150j2qoa8tj'
    ]
  }
}

package.json

{
  "scripts": {
    "dev": "nuxt",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "nuxt": "^1.0.0"
  },
  "devDependencies": {
    "mkdirp-promise": "^5.0.1"
  }
}