Does not work in .vue components files - except highlighting

[chojnicki]

Actual Behavior

Query code does not work in .vue files.

When I try to write query on .vue <script> nothing works except syntax highlighting (so I guess extension detect's code block correctly). No auto completions, suggestions etc. But in .ts, .graphql and other files everything works perfectly, so my API schema if for sure loaded correctly.

It does not matter if I use gql or #graphql.

Also, .vue does work fine in vscode Apollo extension, but not in this one.

Expected Behavior

It should work in .vue components.

In extension features it's listed

Load the extension on detecting gql tag in js, ts, jsx, tsx, vue files

Also I can see vue in extension source code.

So I think this extension supposed to support vue out of the box?

Steps to Reproduce the Problem Or Description

demo.vue

<template>
  <div />
</template>

<script setup>
const demo = `#graphql
  query {
    me {
      id,
      email
    }
  }
`
</script>

.graphqlrc.js

module.exports = {
  schema: 'http://localhost:8085/graphql'
};

or

module.exports = {
  schema: 'http://localhost:8085/graphql',
  documents: 'src/**/*.{graphql,js,ts,jsx,tsx,vue}'
};

Tried multiple config approach, nothing works. But again, I thing it supposed to detect .vue automatically anyway?

Specifications

• GraphQL for VSCode Extension Version: v0.3.50 or v0.3.41
• VSCode Version: 1.63
• OS Name: Linux Mint
• OS Version: 20.2
• .graphqlrc.js multiple formats

Logs Of TS Server || GraphQL Language Service

1/2/2022, 10:27:49 PM [3] (pid: 66114) graphql-language-service-usage-logs: {"type":"usage","messageType":"initialize"}

[Info  - 21:27:49.99] Starting TS Server 
[Info  - 21:27:49.99] Using tsserver from: /usr/share/code/resources/app/extensions/node_modules/typescript/lib/tsserver.js
[Info  - 21:27:49.101] <syntax> Forking...
[Info  - 21:27:49.107] <syntax> Starting...
[Info  - 21:27:49.108] <semantic> Forking...
[Info  - 21:27:49.111] <semantic> Starting...

[Shinigami92]

Assuming that this is not easy to solve, cause then someone already had solved it. But where would I need to start to fix this?

I need it in Vue and currently this plugin is not that helpful when the main feature is not working at all (for vue files) Sadly I also have no knowledge of VSCode plugins :confused:

[acao]

It's on the roadmap! just need to add a vue parser to findGraphQLTags in graphql-language-service-server.

please can someone find and mark all the duplicate vue and svelte tickets across vscode-graphql and graphiql?

[jycouet]

I had a look and didn't find many duplicates, it's mainly roadmaps. I will start working on the svelte support. Should I create a dedicated issue linked with the roadmap? or?

[acao]

@jycouet please feel free to create a PR for highlighting and/or language support for svelte! I was doing some research the other weekend and found a strategy for vue that may be applicable to svelte and markdown as well, in some cases.

The funky thing here is that we have a (possibly) 2x embedded language situation, similar to what we have with js in markdown, which is not a case we've handled with language parsing. So we have to account for both the offset in js/ts already when returning graphql errors (which are based on the static string), and the offset for the js/ts itself within the .vue, .svelte or .md file.

One approach is where we append the offsets from the .vue file as whitespace to the input js string and run it throughfindGraphQLTags.

The alternative to the whitespace approach is to just offset the line/column after returning them from findGraphQLTags, perhaps within parseDocument.

I can't remember which after learning about vue and svelte more this weekend, but I think both have a mode where components can be written as normal js/ts as well but still have the extension?

[jycouet]

Correct, in svelte you can do js:

<script>
    import { query, graphql } from '$houdini'

    const { data } = query(graphql`
        query SpeciesInfo {
            species(id: 1) {
                name
                flavor_text
                sprites {
                    front
                }
            }
        }
    `)
</script>

or ts:

<script lang="ts">
    import { query, graphql } from '$houdini'

    const { data } = query<SpeciesInfo>(graphql`
        query SpeciesInfo {
            species(id: 1) {
                name
                flavor_text
                sprites {
                    front
                }
            }
        }
    `)
</script>

[jycouet]

Hi @acao @aloker

When I look at logs of the VSCode extension, I see:

11/16/2022, 9:15:10 AM [1] (pid: 552) graphql-language-service-usage-logs: Could not parse the Vue file at file:///.../Foo.svelte to extract the graphql tags:
11/16/2022, 9:15:10 AM [1] (pid: 552) graphql-language-service-usage-logs: SyntaxError: Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<).

In this file, there is no graphql tag, so I'm not sure how it's detecting an issue? Minor thing: it's telling: Could not parse the Vue file, maybe it could be Could not parse the Vue style file 😉