Nuxt Vite is unable to load/compile gql file

[minyou9]

Version

nuxt-vite: v0.0.7 nuxt: v2.15.2

Description

Without Nuxt Vite module, I was able to import a graphql file to my vue component. The moment I added Nuxt Vite, the gql was unable to load/compiled.

file: files.gql

ERROR Server compiled with errors: Unexpected token (1:6) 20:30:42

at Object.pp$4.raise (node_modules\rollup\dist\shared\rollup.js:15857:13) at Object.pp.unexpected (node_modules\rollup\dist\shared\rollup.js:13549:8) at Object.pp.semicolon (node_modules\rollup\dist\shared\rollup.js:13526:64) at Object.pp$1.parseExpressionStatement (node_modules\rollup\dist\shared\rollup.js:14005:8) at Object.pp$1.parseStatement (node_modules\rollup\dist\shared\rollup.js:13740:24) at Object.pp$1.parseTopLevel (node_modules\rollup\dist\shared\rollup.js:13606:21) at Object.parse (node_modules\rollup\dist\shared\rollup.js:13408:15) at Function.parse (node_modules\rollup\dist\shared\rollup.js:13429:35) at Object.Graph.contextParse [as parse] (node_modules\rollup\dist\shared\rollup.js:19134:70) at Object.transform (node_modules\vite\dist\node\chunks\dep-1bdbec90.js:33778:27) at Object. (node_modules\vite\dist\node\chunks\dep-1bdbec90.js:46726:33) at node_modules\rollup\dist\shared\rollup.js:19049:25

[pi0]

Hi @minyou9. Would you please share your project and/or configuration? If depending on a module like apollo to support gql extension, we need to support vite mode for it later on.

[madsh93]

@minyou9 A workaround could be wrapping the files as .js. I am not entirely sure it works though. I am getting "Cannot find module 'ky-universal/node'" with nuxt/strapi.

e.g. like this

path: queries/products.js

import gql from 'graphql-tag'

export default gql`
  query Products {
    products {
      id
      name
    }
  }
`

If you use something like Apollo, remember to add loc.source.body

path: pages/products.vue

    const response = await graphql({
      query: products.loc.source.body
    })

Note. this requires graphql-tag

[pi0]

@madsh93 Do you mind making a PR to add workaround to readme?

[madsh93]

@madsh93 Do you mind making a PR to add workaround to readme?

I've updated my answer above. I just tested with new nuxt install and nuxt/strapi. I got this error "Cannot find module 'ky-universal/node'". I can't 100% confirm the above solution works.

@minyou9 would you report back if above solution works for you?

[pi0]

Indeed it is the best solution until supporting graphql loader/plugin for modules like apollo.

BTW issue with strapi, is with http module (#25)

[minyou9]

@pi0 & @madsh93 I tested the solution above and it resolved the issue. The error does not appear anymore on the console. For loc.source.body , I didn't add it on my .vue file, but the Vite didn't complain at all, so I guess it works fine without that then. By the way, I am using nuxtjs/apollo module not nuxt/strapi. Thank you for the help both!

[blqke]

If like me, you dont want to touch to your beautiful .gql/.graphql files, an other workaround would be to use graphql-codegen with these plugins:

      - "typescript"
      - "typescript-document-nodes"

Which will compile your .graphql/.gql files accordingly

Exemple on my current project: I have this .gql file

#import '../fragments/widgets.gql'
#import '../fragments/companies.gql'

query DevDashBoardPage {
  ...allWidgets,
  ...allCompanies
}

In my page component I just replaced these import lines:

import pageRequest from '@/graphql/queries/pages/dev-dashboard.gql'

by this

import { DevDashBoardPage as pageRequest } from '@/generated/graphql/operations'
// import pageRequest from '@/graphql/queries/pages/dev-dashboard.gql'

My codegen.yml

overwrite: true
schema: "http://localhost:3000/graphql"
documents: "graphql/**/*.gql"
generates:
  generated/graphql/operations.ts:
    plugins:
      - "typescript"
      - "typescript-document-nodes"

Still not perfect but hey, it keeps my ~/graphql/ folder clean

[oooplz]

Hi. The issue still open. And i'm useing vite2 and Vue3.0. I had found a rollup plugin that works for me. @rollup/plugin-graphql

[MCYouks]

Any update on this issue? Has a graphql loader been released to work nicely with Vite2, Vue3, and Vue Apollo? Thanks

[oooplz]

if you woking with Vite

import vue from '@vitejs/plugin-vue';
import graphql from '@rollup/plugin-graphql';
import { resolve } from 'path';

export default (): Record<string, unknown> => {
  return {
    plugins: [vue(), graphql()]
  };
};

if you working with nuxt3

import { defineNuxtConfig } from 'nuxt3';
import graphql from '@rollup/plugin-graphql';

export default defineNuxtConfig({
  vite: {
    plugins: [graphql()]
  }
});

I am hoping i can help for you.

[oooplz]

I tried the rollup plugin above on a fresh installation of Nuxt Bridge with vite turned on and got the following:

npm install graphql

or

yarn add graphql