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
Go to VS Code marketplace and download SurfQL.
Once installed, the first time you open your project, follow the pop-up message to create a surfql.config.json file.
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.)
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.
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!
Fork & Clone SurfQL
Create your Feature Branch (git checkout -b <github_username>/<YourAmazingFeature>)
Make your Changes (See Making Changes below)
Commit your Changes (git commit -m '<Your Commit Message>')
Push to the Branch (git push origin <github_username>/<YourAmazingFeature>)
Open a Pull Request
Making Changes
Make your changes!
Re-compile and re-build your extension using the command line: npm run compile & npm run build
Press F5 (or use the VS Code Debug console) A new VS Code window should open in development mode. This is your debugging environment!
Repeat step 3 and refresh your debugging environment to test further changes.
Code Auto-completion
