Apollo query inside nuxt.config.js

Question

I'm trying to make a smart request in nuxt with nuxt-apollo-module in order to grab my routes for the nuxt-sitemaps-module (so I can create my sitemap with them).

I need to make this request from within nuxt.config.js file. I have tried this way with no luck (as app doesn't exist in this context). What would be the right way to do this? Thanks in advance!

The relevant part of my nuxt.config.js

import gql from 'graphql-tag'

module.exports = {

  modules: [
    '@nuxtjs/apollo',
    '@nuxtjs/sitemap'
  ],

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://example.com/graphql'
      }
    }
  },


  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com/',
    generate: true,
    cacheTime: 86400,
    trailingSlash: true,
    routes: async ({ app }) => {
      const myRoutes = ['/one-random-path/']
      let client = app.apolloProvider.defaultClient
      let myProductsQuery = gql`query {
          products {
              slug
          }
      }`
      let myBrandsQuery = gql`query {
          brands {
              slug
          }
      }`
      const myProducts = await client.query({ query: myProductsQuery })
      const myBrands = await client.query({ query: myBrandsQuery })

      return [myRoutes, ...myProducts, ...myBrands]
    }
  }
}

user_12116314 · Answer

I was able to generate it this way, but I'm sure there is a better way.

yarn add node-fetch apollo-boost

sitemap: {
  routes: async () => {
    const routes = []
    const fetch = require("node-fetch")
    const { gql } = require("apollo-boost")
    const ApolloBoost = require("apollo-boost")
    const ApolloClient = ApolloBoost.default

    const client = new ApolloClient({
      fetch: fetch,
      uri: YOUR_API_ENDPOINT,
    })

    const fetchUsers = gql`
      query {
        users {
          id
        }
      }
    `

    const users = await client
      .query({
        query: fetchUsers,
      })
      .then((res) => res.data.users)

    users.forEach((user) => {
      routes.push({
        route: `/${user.id}`,
      })
    })

    return routes
  },
},

Apollo query inside nuxt.config.js

1 Answers