Skip to content

Improve GraphQL explorer

Fabian Schneider requested to merge fabsrc/gitlab:325945-graphql-explorer into master

What does this MR do and why?

Adds a new custom implementation of GraphiQL, which can be activated using the new_graphql_explorer feature flag. The new implementation uses the latest version of GraphiQL which includes a completely new UI. Also, some customizations were added:

  1. Default Query was changed to include link to GitLab GraphQL docs and an example query
  2. GitLab logo was added
  3. Implementation for GraphQL subscriptions was added

Some further customizations and improvements could be done in the future:

  1. Use a custom GraphiQL plugin to display an introduction text, getting started guide, links to documentations and a list of example queries.
  2. Add authentication and authorization
  3. Customize colors to align with GitLab's design
  4. Allow to pass queries via search params, e.g. to create "Open Query in GraphQL Explorer" links in the documentation

Screenshots or screen recordings

Screenshot_2022-10-05_at_11.52.07 Screenshot_2022-10-05_at_11.53.28

How to set up and validate locally

  1. Enable feature flag ins rails console
    Feature.enable(:new_graphql_explorer)
  2. Visit graphql-explorer http://127.0.0.1:3000/-/graphql-explorer
  3. Run GraphQL queries, mutations and subscriptions

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Based on !61040 (closed)

Related to #325945

Edited by Fabian Schneider

Merge request reports