Artemis: A client side browser Dev Tool for Apollo Client GraphQL

At Artemis Labs, we aim to create cutting edge responsive open source solutions that facilitate continuous test driven query testing, mutability, and introspection as we make the shift away from antiquated RESTful architectures into the era of decentralization, focusing on technologies like Apollo GraphQL. https://chrome.google.com/webstore/detail/project-artemis/gpncgocimlpojfgbphndpjgkkhdjhnpb?authuser=0

https://chrome.google.com/webstore/detail/project-artemis/gpncgocimlpojfgbphndpjgkkhdjhnpb?authuser=0

We want to make the transition to using GraphQL and Apollo systematic and fluid for the developer by incorporating the most essential features when adopting this technology. We also wanted to create a new methodology for how we view data. Based on the concepts of introspection, developers are better able to create robust systems that can scale and provide flexibility when testing query endpoints, giving them leverage over their conversions.

Project Artemis is an Open Sourced tool for single endpoint testing of GraphQL queries with Apollo Client with instant engineering feedback. It is now available at the Chrome Store and can be viewed in the inspector window: https://chrome.google.com/webstore/detail/project-artemis/gpncgocimlpojfgbphndpjgkkhdjhnpb?authuser=0

Open Source Github Project: https://github.com/ArtemisLabsLLP/Artemis-dev-tool

Once the extension is downloaded and set on Developer mode, it will be in the web app’s inspector window, and allows custom detection of GraphQL apps in which client queries exist, time travel, visualizer and query snapshot.

Figure 1. Begin testing Apollo Client App in inspector window

Debug and test query mutations and calls using introspection

Fig 2. Display schema, query, and GraphQL response with single endpoint detection

Visualize schema with a D3 Visualization tree that expands child nodes.

Fig 3a. D3 Tree Schema Visualize

Fig 3b. Expand D3 Tree

Fig 4. History of past query calls in a testing session redirect to the past query response

Query endpoint testing and cache management can be done in real time for instant engineering feedback without the need for backend resolvers.

Figure 5. View GraphQL normalized Cache displayed in JSON format from inspector window

After testing multiple GraphQL applications, we have developed this tool to become easily accessible and help other engineers avoid the ultimate cache 22 when it comes to continuous integration testing with Apollo.

The web based extension is best used for React and Express products/applications in development mode, and is available at the chrome store.

Core features:

1. Display schema, query, and GraphQL response with endpoint detection
2. Query caching and component storage- View normalized Apollo Client cache in JSON Format
3. History of past queries per testing session
4. Query response Snapshot feature
5. View Response and Query Visualizer tree in inspection window
6. Performance monitoring and Management

To utilize, open the inspector window. If a website or hosted site you are currently testing contains Apollo Client. Artemis will appear and will render once a GraphQL query is detected.

Project Artemis is still in Beta, and is a subset project of OS-Labs.

Artemis Labs LLP located in Venice, CA is actively looking for contributors and engineers to join the team. Send a pull request!

Technologies used: React Hooks, Typescript, GraphQL, D3, Jest, Enzyme, AWS, Travis CI and React component library Testing

License This project is protected under the MIT License.

ArtemisLabsLLP/Artemis-dev-tool

Authored by Artemis Labs Engineering Team

https://chrome.google.com/webstore/detail/project-artemis/gpncgocimlpojfgbphndpjgkkhdjhnpb?authuser=0

Artemis Labs is Located in Los Angeles, CA

Tim Jung: https://github.com/timjj92

Justin Lo: https://github.com/justinnnlo

Seong Choi: https://github.com/choies921003

Angie Chang: https://github.com/angiechangpagne

All rights Reserved Artemis Labs