Building a GraphQL Admin Panel with Superblocks

Building a GraphQL Admin Panel with Superblocks

GraphQL is a query language for your API, and a runtime for executing those queries against your data. It allows clients to define the structure of the data they need, and the server will return only the requested data. This can lead to more efficient and flexible APIs, as the server is not limited to a fixed set of endpoints, and the client can request exactly the data it needs. Additionally, GraphQL allows for real-time updates through subscriptions, and can be used with a variety of programming languages and technologies.

In This Post 

By the end of this post you’ll have an understanding of how to create a GraphQL admin panel. This example will build out a usable application to display and search for Pokemon cards. It relies on the TCGdex GraphQL library so you can build out your own version of the application. You’ll learn how to fetch data from GraphQL and display the results in a grid, as well as pass data back to GraphQL for filtering the data.

Connecting Your GraphQL API

The GraphQL integration can be set up against both open and authenticated endpoints with Superblocks supporting a variety of authentication methods. Basic authentication, bearer token, API key and OAuth2 support provide plenty of authentication options. Credentials can be optionally dynamically fetched via another Superblocks Workflow, and the tokens will be automatically managed by Superblocks.

‍

For this application however, the API is openly available and so no authentication is required.

Creating an Application

Starting with a new application, the first thing to do is set up an Input component and a couple of Dropdown components that we can use to allow users to query the dataset. This can be done quickly with drag and drop from the components panel.

Once those are in place, an API can be created to load all of the cards within the database. As this is an open API we’ll also use the pagination flags to reduce load on the GraphQL server. 

‍

One of the huge advantages of GraphQL is that you can specify the data that is to be loaded and therefore pull back only what you need. In this case, in order to build out the grid of cards, only a few of the many attributes are required.

Within the filters section bindings have been specified, this will allow data entered into the input box and dropdowns to be passed to GraphQL. The API is now complete and the data is ready to be passed into the application UI.

‍

Superblocks provides a wealth of components to build out the UI for any application, some examples include Tables, Modals, Maps, and Charts. In this case, a Grid component can be dragged into the canvas and connected to the output of the API.

As a final step, each component within a grid cell can be assigned to a JSON parameter. Within a couple of minutes the beginnings of a production ready application have been created. The application can now be released and shared for use with the rest of the team or organization.

Sharing Applications with RBAC

The finished application can be shared quickly and easily with the whole organization, individuals, or groups via the Share modal for granular role-based access control. Superblocks will take care of all of the headaches of authentication and authorization for you.

Workflows and Scheduled Jobs

The GraphQL integration isn't limited to Application building, it can also be used in both Workflows and Scheduled Jobs. A Workflow is a REST endpoint built in Superblocks, a great example is building a refund workflow. Scheduled Jobs are perfect for daily/weekly reports, or any other task required to run on a scheduled basis, perhaps a daily report into Slack.

Audit Logging

Search the logs of every user action in your internal Applications, Workflows, and Scheduled Jobs execution history. Use Audit Logs to quickly identify errors as well as who is running queries against your data. It's a great tool for troubleshooting any API errors, especially for Scheduled Jobs/Workflows that run during off-hours.

Try Out GraphQL with Superblocks

Superblocks has helped hundreds of developers save 100s of hours of time both in building and in using internal applications.

‍

To learn more about how to create internal Applications, Jobs, and Workflows with Superblocks view our documentation. Try creating your first Application today with a free 14-day trial​​.

‍