Fragments work in .ts files but not .vue

[NicholasFeldman]

Version and Environment Details

Operation system: MacOS Mojave 10.14.3

IDE name and version: PHPStorm 2018.3

Plugin version: v2.0.0-alpha-5

Expected Behaviour

GraphQL fragments in a both a TypeScript and a Vue file will have proper schema hinting and validation

Actual Behaviour

GraphQL fragments with identical queries don't recognize the field of the query in a Vue file. Files are side by side in the same directory.

Steps to Reproduce / Link to Repo with Reproduction and Instructions

Images included.

[koresar]

I'm using .vue files too. However, everything is just fine.

I had similar issue when there was no scope configured in the IDE or when I had two different scopes. You might have the issue because your scope doesn't include .vue files.

Currently I have single scope with includes everything: file[project-name]:*/

[NicholasFeldman]

I have a single project scope like that that does include vue files, but after reindexing it still doesn't work. Here's what I have in my .graphqlconfig as well:

{
    "endpoints" : [
        {
            "name": "Development",
            "url": "http://localhost:8081/api/graphql",
            "options" : {
                "headers": {
                    "user-agent" : "JS GraphQL"
                }
            }
        }
    ],
    "excludes": [
        "./backend/vendor/**"
    ]
}

[gunta]

+1

[basuneko]

I'm having this problem as well ☹️ Fragments defined in .graphql and .ts are correctly highlighted and are available in autocompletion; but fragments defined in .vue files are not discoverable. For now, my workaround is to extract fragments into .graphql files.

.graphqlconfig
{
  "name": "GraphQL Schema",
  "schemaPath": "schema.graphql",
  "includes": ["*.graphql", "*.vue", "*.ts", "*.js"],
  "excludes": ["node_modules/**"]
}

(I have just switched to graphql-codegen and use it for schema introspection now; however, adding endpoint config back had no effect)

[AAllport]

Seems to still be an issue with V3 (PHPStorm 2021.2.2) We've got a Larvel Lighthouse + vue-apollo project with a split configuration:

{
  "name": "App Graphql Schema",
  "projects": {
    "server": {
      "includes": [
        "graphql/*.graphql",
        "schema-directives.graphql"
      ]
    },
    "client": {
      "schemaPath": "_schema.graphql",
      "excludes": [
        "graphql/*.graphql",
        "schema-directives.graphql"
      ],
      "extensions": {
        "endpoints": {
          "Local GraphQL Endpoint": {
            "url": "http://localhost/graphql",
            "headers": {
              "user-agent": "JS GraphQL"
            },
            "introspect": true
          }
        }
      }
    }
  }
}

Creating a fragment:

const TodoListItemData = gql`fragment TodoListItemData on ToDoItem{
    id, name, details, position, status
    todoable {... on Project { id, name }}
}`;

Usage:

No errors at runtime

As a stop-gap, we can define TodoListItemData in any other .js file (as opposed to inside the .vue) and it seems to work, however, that is less than ideal for our application. I've tried adding it to the fragments object (as defined here: https://apollo.vuejs.org/guide/components/query.html#using-fragments) with no avail