SurfQL

SurfQL

SurfQL is a VS Code developer tool that displays user defined GraphQL schema in a visualizer and allows for autocompletion for your query using Intellisense.

Functionality

Schema Visualization Code Auto-completion

Instructions

1. Go to VS Code marketplace and download SurfQL.
2. Once installed, the first time you open your project, follow the pop-up message to create a surfql.config.json file.
3. Click the Q logo that appears on your side bar, and click on the View Schemas Button to initiate the visualizer. It will open a webView panel with your visualization of the schema hierarchy. If you don't have a config file, you can also mannually select your schema file following the pop-up file selector manually. (Currently SurfQL supports parsing schema files written with Apollo Server library. Support for more libraries is under development.)
4. Beyond visualization: Back to your project, once you begin building up your query in your project file, SurfQL will begin parsing your query and suggesting the available fields to complete your query.

Built With

• Typescript
• VSCode Extension API
• Bootstrap V5.0
• JavaScript

• GraphQL
• Apollo

Supported File Types

GraphQL Schema Definition Files

• Supported file types: .graphql, .graphqls, .ts, .js
• To request support for additional file types, please create an issue

Autocomplete Suggestions

• Supported file types: .js, .jsx, .ts, .tsx
• To request support for additional file types, please create an issue

Extension Settings

Make sure to include a configuration file named surfql.config.json

Example

{
  "schema": "./<path to your graphql schema definition file>",
  "serverLibrary" : "Apollo Server"
}

Roadmap

• [ ] Create schema file parsing support for different libaries, eg. GraphQL.js, graphql-yoga, etc.
• [ ] Create a Postman type API that sits in VSCode
  • [ ] Create input fields for requests on the webview panel
  • [ ] Connect to the GraphQL API to return the data
  • [ ] Display the data in the panel

Steps to Contribute

Contributions really make the open source community an amazing place to learn, inspire, and create. Any contributions made to surfQL are appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork & Clone SurfQL
2. Create your Feature Branch (git checkout -b <github_username>/<YourAmazingFeature>)
3. Make your Changes (See Making Changes below)
4. Commit your Changes (git commit -m '<Your Commit Message>')
5. Push to the Branch (git push origin <github_username>/<YourAmazingFeature>)
6. Open a Pull Request

Making Changes

1. Make your changes!
2. Re-compile and re-build your extension using the command line: npm run compile & npm run build
3. Press F5 (or use the VS Code Debug console) A new VS Code window should open in development mode. This is your debugging environment!
4. Repeat step 3 and refresh your debugging environment to test further changes.

The SURFQL Team

• Ethan McRae LinkedIn | Github
• Tristan Onfroy LinkedIn | Github
• Yanqi Joy Zhang LinkedIn | Github
• Steve Benner LinkedIn | Github
• Dwayne Neckles LinkedIn | Github

Contact Us

Email: surfqlapp@gmail.com Website: http://www.surfql.com/