'Edit operation' doesnt work with Gridsome (Vue) files

[Uninen]

Gridsome (repo) is a static site generator for Vue that uses GraphQL for development data store. It extends Vue single file components with two custom blocks (page-query and static-query) that can be easily added to Vetur in VSCode with following config:

  "vetur.grammar.customBlocks": {
    "page-query": "graphql",
    "static-query": "graphql"
  },

This is not, however, visible for vscode-graphiql-explorer (copying the query to a blank file and editing it there works fine, tho) -- could this support be added?

[zth]

Hey @Uninen !

Could you provide me with an example of how the code that defines the GraphQL operation, and isn't picked up as of now, look? Pasting an example file that isn't working would be great.

[Uninen]

Here's an example from the Gridsome repo: https://github.com/gridsome/gridsome-starter-default/blob/master/src/layouts/Default.vue

I see only one potential problem here; there may be two graphql sections inside one Vue file, one page query and one static query. Currently if the extention is just looking one query, it would find two.

The optimal solution would either do something in the lines of Explore schema at cursor with GraphiQL or provide a choice for the user if multiple schemas are found. (Don't know what currently happens if there are two schemas in supported files?)

[Uninen]

Here's another example: https://github.com/gridsome/gridsome-starter-blog/blob/master/src/templates/Post.vue

[zth]

Great! The edit operation actually tries to extract the operation you have your cursor on (meaning it supports multiple operations in the same file), so that should work already I hope!

I think this will be a fairly easy fix. Would you be interested in submitting a PR if I guide you through what needs to be done where?

[Uninen]

Sure, I'd be happy to give it a try! I've never written a VS Code extension but I suppose its not rocket science :)

[zth]

Cool! It's not, but it's really fun :grin: Give me a few minutes to write this up properly. I'll post here again soon.

[zth]

Quick background

GraphQL sources in a document is extracted using regex's in this extension. VSCode will tell us what type of document we're currently in (vue, js, ts, reason etc), and we apply specific regex's accordingly, since most languages differ in how GraphQL operations are defined.

What you'll need to do

The bulk of what you'll do is modifying the regex that extracts GraphQL sources from JS-based files. Basically, what you'll need to do is:

1. Change the extraction logic for vue files to support extracting from your custom elements.
2. Add tests for said change.
3. Test your changes in the actual extension.

Most of the code you'll need to edit is located in findGraphQLSources.ts. Here's how GraphQL operations from JS sources are extracted: https://github.com/zth/vscode-graphiql-explorer/blob/master/ext-src/findGraphQLSources.ts#L40-L42

Right now, vue files are handled the same way as any other js based file, which means that you'll need to modify the regex I linked to above to also support extraction from <page-query></page-query> and other custom elements you want to support.

Are you experienced with regex's or would you like me to help out there?

You can work test-driven by adding tests for this to https://github.com/zth/vscode-graphiql-explorer/blob/master/ext-src/__tests__/findGraphQLSources-tests.ts . It should be fairly evident how to add a new test for what you want to test there - if not, let me know and I'll guide you. You run tests by running yarn test in the repo root (yarn test --watch for watchmode).

Testing your changes in the actual extension

To test your changes, open this repo in VSCode. Right now, you'll need to do the following to test your changes in the actual extension:

1. Run yarn build in the repo root. This will build the full extension and produce the artifacts needed.
2. Go to the debug tab in VSCode. In there, at the top left, you should see a select field with a run button next to it. Select Launch extension and press play, and a new VSCode window should launch with your changes applied to the extension.

Additional information

The extension is split up in 2 separate projects: the extension and the webview that renders GraphiQL. The extension sources is located in ext-src and the webview sources in src. You'll only need to make changes to ext-src, but it's good to know why the folder structure looks like it does.

Let me know if you have any questions or if I'm not doing a good job explaining! :grin:

[Uninen]

Whoa, excellent instructions 👍

I'll give this a shot. I'm familiar with regex and testing tools so there shouldn't be too much unfamiliar territory here.

[zth]

Awesome @Uninen :smile: ! Looking forward to seeing what you come up with.

[zth]

@Uninen hey! Did you get stuck on something here, anything you need from me?

[Uninen]

Sorry for the radio silence. I indeed got stuck with the tests as I couldn't get them to run and after lots of tweaking (in a way which is not publishable) I couldn't figure out a way to capture the proper output with the current implementation (which I copied as a starting point).

Meanwhile, the world happened and had to drop all hobby projects for a while. I just pushed the unfinished first stab to my fork as is. I currently have very limited time for hobby projects but crossing fingers that maybe this changes in a couple of weeks :)