nuxt-graphql-request
nuxt-graphql-request copied to clipboard
Generate dynamic routes width payload for full static site
I would like to import .gql files into nuxt.config.js. How can I do that?
I get this error:

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
}
})
}
)
}
}
}
I found a solution thanks to a colleague:
import fs from 'fs'
const postsQuery = fs.readFileSync('./queries/posts.gql', 'utf8')