GraphQL, Streaming, and RESTful API development Come Together in this Open Source Software

Swell is a cross-platform compatible (Mac, Linux, & Windows) desktop application and the leading API dev tool for testing and visualizing steaming TCP connections (ie WebSockets, SSEs, GraphQL subscriptions). Swell functions similarly to Postman, but with the added perks of full streaming and GraphQL support. Being an Open Source project, Swell is 100% free and open to outside contributions.

Background

Since Facebook’s release in 2015, GraphQL has quickly emerged as a new paradigm of managing API requests. GraphQL has been adopted by Pinterest, PayPal, The New York Times, Twitter, Yelp, and many others. However, there remains a dearth of comprehensive testing tools for GraphQL, especially for subscriptions that are typically served over WebSockets or other streaming protocols.

As it stood, Swell was an API development tool that enables developers to test endpoints served over streaming technologies including Server-Sent Events (SSE), WebSockets, and HTTP2.

Our team enriched Swell’s existing functionality by adding support for GraphQL queries, mutations, and subscriptions. Swell is now a feature-rich solution for testing GraphQL endpoints including variables, authentication tokens, collections of multiple simultaneous requests, and more.

How Swell works

Swell users can test GraphQL endpoints by selecting GraphQL and the appropriate root type (i.e., query, mutation, subscription), and then entering the relevant body or variables. After creating a new request and opening the connection, Swell will initiate the request with Apollo and, if it is a subscription, Swell will maintain a WebSocket connection for new data. Responses are also updated within the Redux store and rendered to the page with React.

Beyond GraphQL, Swell also has new functionality to organize requests into Collections. After a user adds multiple requests, clicking “Save Collection” prompts the user for a collection name. Upon saving, Swell retains all open requests within a new table in the IndexedDB, which can be easily repopulated when the user selects it from the new Collections menu.

Saved collection can also be exported and imported as a text file for sharing purposes. While hovering over a collection, clicking “Export” prompts the user to save collection as a text file in their system. Swell users can import collection file from another user by clicking "Import Collection".

Tech Stack

React, Redux, Node, GraphQL, WebSockets, HTTP (1.1 / 2), Server-Sent Events, Electron, Apollo Client, IndexedDB, Chart.js, React-Modal, Javascript, HTML5, SCSS/CSS3, Webpack, Jest, Enzyme, Babel

Technical challenges

GraphQL

We integrated GraphQL client into the strict Redux-based MVC architecture of Swell. In short, user requests were stored using Redux, controllers would separately send requests and parse responses that would update the Redux store, and then Redux would trigger re-rendering with React. We also built and deployed multiple GraphQL servers with varying authentication schemes for testing.

HTTP/HTTPS/WebSockets Protocols

Understanding how different web protocols and implement in an electron-based application which runs on Chromium, an abstraction of Chrome.

Electron's Inter Process Communication

Swell’s internal structure was recently reimplemented into a hybrid architecture where all streaming capabilities are performed by the Chromium process and all unary activity is handled by the Node process.  Using Electron’s Inter-Process Communication (IPC), unary request data is sent to Node and dispatched to the appropriate endpoint, bypassing CORS restrictions normally encountered in Chromium process.  Using the architecture, we now have full access to the headers returned from the endpoint without the use of a proxy server.

Check out more on our website: http://www.getswell.io/

And don't forget to star us on GitHub if you appreciate our product! https://github.com/open-source-labs/Swell