[v2] Main issue for tracking progress on the v2 branch

[jimkyndemeyer]

Limitations in 1.x and proposed solutions for 2.x

Only a single schema per-project

• 1.x Completion, references, find usages, error highlighting all based on the assumption that a single schema per-project is the norm
• 1.x Issues - Import fragments from a exernal file #43, Add "Navigate to Declaration" across files #56, Support for multiple schemas (on multiple endpoints) #84, Use .graphqlconfig File #125, Apollo Link State queries not supported #129, Save Schema if pulled from URL #140, Add support for Framework-specific Schema directives, e.g. Prisma #144, Allow having multiple configs in a project (scope per subfolder) #145
• 2.x All language features that rely on schema type info should scoped based on their location in the project
  • See https://www.jetbrains.com/help/idea/settings-scopes.html
  • Tasks
    • Let users setup the scopes manually while offering to synchronize scopes based on graphql config files
    • Create settings page for scopes
    • Use scopes to limit configured endpoints for query functionality

Node.js + JavaScript plugin dependency

• 1.x Due to these dependencies the plugin is unavailable for IDEs such as Android Studio
• 2.x Will no longer use an external language service, and JavaScript functionality will be marked "optional" in plugin.xml

Changes to spec, grammar, and language difficult to support in the plugin

• 1.x Difficulty in isolating changes from the plugin as the language service changes (e.g. grammar changes affect both the plugin and the LS)
• 1.x Complexity in version management on the NPM packages that the language service depends on
• 1.x Issues - Add tab indentation support #92, Support docstrings #118, Indenting for aliases looks wrong #133, support extending interfaces #137, Invalid schema checks #141, [schema] lack of comments/description of GraphQL objects when schema is generated from endpoint  #150
• 2.x Use JetBrains grammar-kit to support the GraphQL language natively inside the IntelliJ platform
  • No longer need a separate language service with its own eco-system to reduce complexity
  • Will use graphql-java as a native dependency for validation and schema type APIs
    • Possible now that graphql-java 8.0 added language support for SDL
    • Tasks
      • Validation
      • Completion based on schema type info

Developer experience with 2.x

The biggest change with 2.x is making the GraphQL Schema Definition Language (often abbreviated SDL) a first-class citizen in the plugin and not just a read-only view of the schema.

SDL has become part of the spec in graphql/graphql-spec#90 and is already widely adopted by the community for schema authoring.

A widely used example is the Apollo project where the schema is expressed using SDL inside a gql tagged template literal (https://www.apollographql.com/docs/apollo-server/v2/essentials/server.html)

With this in mind, 2.x of the plugin will provide first-class tooling support for writing SDL, including:

• Completion on types when defining fields, arguments, implemented interfaces etc.
• Error highlighting of schema errors such as unknown types, wrong use of types, missing fields when implementing interfaces
• Find usages in SDL and refactoring such as rename which will update the relevant queries, mutations etc.

Any changes to the SDL type definitions will be immediately reflected in the relevant GraphQL queries and other operations within the given scope. This removes the manual step of having to either trigger an introspection query, or update a single combined .graphql schema file as required in 1.x of the plugin.

Overall, developers should be able to much more productive writing schema using SDL.

Documentation (work in progress)

https://gist.github.com/jimkyndemeyer/1903b65ff892f0811e76f16d8b530848

[koresar]

Bug report.

I'm using Apollo GraphQL schema stitching. I have several .graphqls files. Each of them have type Query {... and type Mutation {...

Here is what 2.0.0-alpha-2 shows:

The tooltip shows that I declared the same type multiple times. Which I did only for Mutation and Query.

Not sure how to solve this.

[jimkyndemeyer]

@koresar See my comments here for how to get this working: #145 (comment)

[koresar]

Omg, this is incredible!

Thank you for the amazing plugin. I love the new colours and features. So good!

[koresar]

Hello @jimkyndemeyer

I have a web app project. It uses a GraphQL endpoint (on my local machine). Previously, the plugin required the graphql.config.json file which pointed to the schema.

How would I setup a URI for my queries using the v2?

[jimkyndemeyer]

@koresar I assume you want to introspect a GraphQL endpoint at a URL and print the schema as GraphQL SDL. The next alpha will support .graphqlconfig where you'll get a green arrow next to endpoint urls. Clicking the arrow executes an introspection query, and prints the result as GraphQL SDL to a file.

Until then, you can use https://github.com/graphql-cli/graphql-cli

[JCMais]

Just installed the alpha version, trying to create a simple .graphql file it gives an error:

User is defined right below

[jimkyndemeyer]

@JCMais Have you defined any scopes in "Settings" > "Appearance & Behavior" > "Scopes"? The current alpha uses those to discover schema types. The upcoming alpha has a settings page where this is opt-in, along with support for .graphqlconfig files.

[JCMais]

@jimkyndemeyer it works, thank you!

Also, I'm using relay-modern, completion and go-to reference seems to work inside tagged graphql code, but there is no color highlight, is that correct?

[jimkyndemeyer]

@JCMais If you get completion the GraphQL parser has been injected, so you should see syntax highlighting.

Please create a separate issue with a minimal repo project attached and I'll take a look. Include IDE version.

[jimkyndemeyer]

Released https://github.com/jimkyndemeyer/js-graphql-intellij-plugin/releases/tag/2.0.0-alpha-3

Note the upgrade notes if you're already using the alpha.

[koresar]

Hey @jimkyndemeyer. Question.

I am running separate projects: backend API, frontend SPA. Backend is on http://localhost:3000/graphql

What should be the settings in SPA project to read the schema from backend introspection (just like it was in v1)? I cannot understand where to put my http://localhost:3000/graphql

[jimkyndemeyer]

Endponts are configured using https://github.com/prismagraphql/graphql-config#specifying-endpoint-info

Once you've added your schema path and endpoint url, you should get a green arrow in the editor gutter next to the endpoint url. Click the green arrow to run an introspection query that is saved to the file configured as the schemaPath.

I'm planning on writing up docs for this as the new workflow is somewhat different from v1.

[koresar]

• Sorry, I do not have "dev" environment as in the example you linked.

No green arrow. What am I doing wrong?

[jimkyndemeyer]

@koresar The introspection feature was released yesterday in alpha-3. Can you check your plugin version and make sure it's updated.

[koresar]

I did update today morning. 👍

Found the solution though. Here is the only way I could made it work:

{
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "dev": {
        "url": "http://localhost:3000/graphql"
      }
    }
  }
}

Thanks again! Marvellous plugin :)

Btw. Found a bug.

• Make a typo in the .graphqlconfig. Like, remove just one double-quote.
• Click the green arrow.
  Expected: no green arrow should be visible if JSON is malformed.
  Actual: WebStorm reports exception in the plugin.

The green arrow should not be available to click.

[sibelius]

I've got this error on my relay modern queries

I'm using graphql-config to handle multiple graphql projects and schemas:

{
  "projects": {
    "web": {
      "schemaPath": "./entria/web/data/schema.graphql",
      "includes": ["./entria/web/data/*.graphql"],
      "extensions": {
        "endpoints": {
          "dev": {
            "url": "http://localhost:5001/graphql"
          }
        }
      }
    },
    "app": {
      "schemaPath": "./entria/app/data/schema.graphql",
      "includes": ["./entria/app/data/*.graphql"],
      "extensions": {
        "endpoints": {
          "dev": {
            "url": "http://localhost:5001/graphql"
          }
        }
      }
    },
}

it does not recognize relay modern directives as well

@connection
@arguments
@argumentDefinition
@relay(mask: false)

and so on

[flux627]

How does one install this version? I only see v1.7.3 available through Webstorm's plugin installer.

[jimkyndemeyer]

@flux627 See the releases for install steps: https://github.com/jimkyndemeyer/js-graphql-intellij-plugin/releases/tag/2.0.0-beta-1

[flux627]

Thank you!

[jimkyndemeyer]

Published beta-2:

• Switched to SVG-based icons and added plugin icon.
• Updated document provider to use new style.
• Moved schema discovery in Schemas panel off the UI thread.
• Introduced dedicated GraphQL index to improve performance.
• Fixed various minor issues: Type scopes in arrays, custom scalars omitted by graphql-java, memory leak in query editor.

A thank you to the JetBrains team who contributed multiple pull requests.

[anarasimhan]

@jimkyndemeyer Is this a bug?

A different question... If i have the queries/mutations in a .graphql file in the IDE I see an option to run that query.

But I have a query in the JS file like gql``, I don't see that option. Autocomplete, syntax highlighting works.

Thanks
Anand

[koresar]

It is a bug. I reported it earlier. Just found a way to reproduce.

• Create a new node.js project. (It's a server side project.)
• Create a new file, say schema.graphql with some queries/mutations/types.

Problem: The panel from the above screenshot is present.
Expected: No panels, or at least I can hide/close it.

[anarasimhan]

@koresar Thanks for responding.
I am a little confused by your response. you are saying "Problem: The panel from the above screenshot is present." Do you mean the panel should not be preset?

Anand

[koresar]

@anarasimhan oops. Misread your issue. My issue it totally different. Apologies.

[jimkyndemeyer]

@anarasimhan Not a bug. You can't execute the JS files directly against a GraphQL endpoint, but you can use the "Edit GraphQL fragment" intention to create a separate editor tab that allows you to do it:

[anarasimhan]

@jimkyndemeyer Thanks. Makes sense. There can be more than one query in the js file.
Maybe a "play" icon/button on the gutter on the line where the query is would be easy to use than intention.

[jimkyndemeyer]

🎉🤖 🚀 ⚡️

2.0.0 is now on master! Thank you all so much for helping with the release.

The release has been pushed to the JetBrains repository and should be available within a few days.

Until then you should get a "2.0.0-end-of-beta" via the custom alpha/beta repository. That release is effectively the 2.0.0 but with at notification to let you know when the official release has been approved by JetBrains. You should then remove the custom repository URL as instructed in the notification.

Once again, thank you for all the feedback, the bug reports and the discussions. I hope 2.0 will help you stay productive as you work with GraphQL.

Best regards,
Jim.

[koresar]

After updating I got syntax error in the code which used to highlight correctly. It's a valid GraphQL query. It shouldn't be red.

When I hover mouse over the red text the tooltip says:

Unknown fragment spread "AddressParts"

fragment AddressParts on Address { street suburb state postcode country }
fragment ContactParts on IContact {
    address { ...AddressParts }
    id firstName lastName companyName
}
fragment RecipientParts on Recipient {
    ...ContactParts
    bankIdentifier accountIdentifier country
}
fragment SenderParts on Sender { ...ContactParts dob }

{
  ... then goes the query
}

[jimkyndemeyer]

@koresar Please create a separate issue for this with steps to reproduce. I see that you're using an injection comment which could be the reason why the newly introduced index doesn't discover the fragments. Also add the reason why the language=GraphQL comment is needed for your use case.