nuxt-graphql-request icon indicating copy to clipboard operation
nuxt-graphql-request copied to clipboard

Generate dynamic routes width payload for full static site

Open egon43 opened this issue 4 years ago • 1 comments

I would like to import .gql files into nuxt.config.js. How can I do that?

I get this error: Screenshot 2021-10-15 at 09 46 12

This is my nuxt.config.js

import { request, gql } from 'graphql-request'
import PostsQuery from './queries/posts.gql'

export default {
  target: 'static',
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000',
    graphql: process.env.WP_GQL_URL || 'https://wpress.test/graphql'
  },
  head: {
    title: 'title',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css: [
  ],
  plugins: [
  ],
  components: true,
  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/tailwindcss',
    'nuxt-graphql-request'
  ],
  eslint: {
    fix: true
  },
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/i18n'
  ],
  graphql: {
    clients: {
      default: {
        endpoint: process.env.WP_GQL_URL,
        includeNodeModules: false
      }
    }
  },
  axios: {},

  i18n: {
    locales: [
      {
        code: 'en',
        name: 'English'
      },
      {
        code: 'pt',
        name: 'Portugese'
      }
    ],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
    }
  },
  build: {
    loaders: {
      sass: {
        implementation: require('sass')
      },
      scss: {
        implementation: require('sass')
      }
    }
  },
  router: {
    prefetchLinks: false
  },
  generate: {
    fallback: true,
    routes () {
      return request(process.env.WP_GQL_URL, PostsQuery).then(
        (res) => {
          return res.posts.edges.map((post) => {
            return {
              route: `${post.node.language.slug != 'en' ? '/' + post.node.language.slug : ''}/blog/${post.node.slug}`,
              payload: post.node
            }
          })
        }
      )
    }
  }
}

egon43 avatar Oct 15 '21 06:10 egon43

I found a solution thanks to a colleague:

import fs from 'fs'
const postsQuery = fs.readFileSync('./queries/posts.gql', 'utf8')

egon43 avatar Oct 15 '21 11:10 egon43