Does not work in .vue components files - except highlighting

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...

[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]

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>