Ready to get started?
Try it free, or book a demo with an expert to learn how you can deliver internal apps 10x faster 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.
Stay tuned for updates
Get the latest Superblocks news and internal tooling market insights.
You've successfully signed up
Table of Contents
Multiple authors
November 8, 2024
Selecting a React Component Library, the Strategic Way
For engineering teams choosing a new UI component library, it’s easy to over-index on visuals and ease of use. It’s only when a library choice begins to create tech debt and extensibility headwinds a few months down the line that teams begin to recognise the enormous challenge of selecting a library that can truly carry their codebase for the long-haul.
Multiple authors
September 10, 2024
Announcing the Superblocks Testing SDK: Build Mission Critical Apps in Low-Code
In an environment where time-to-market is crucial, low-code platforms are game-changers, allowing developers to build full-stack applications with a fraction of the time and effort. Traditionally, low-code platforms have offered limited testing support - resulting in trading development speed for unstable applications and long, tedious manual testing cycles. As a result, developers are often disincentivized to use low-code to build complex applications and mission-critical tooling for their support and ops teams - often resulting in it never being built at all.At Superblocks, we're taking a pro-code approach to the traditional low-code setup by introducing the Superblocks Testing SDK. With this new SDK, you can easily integrate testing into your workflow, letting you confidently build resilient and complex applications. Never worry again about the stability of your mission-critical applications, just write and run tests as you build in the testing frameworks you love. When you're ready to review, just integrate your testing into your CI/CD pipelines to automatically detect regression before you deploy. Now, creating powerful applications that meet the demands of modern businesses is not just possible—it’s a breeze!
Multiple authors
July 9, 2024
Velocity Global: Leading Employer of Record provider achieves efficiencies in time to market, scale, and cost savings with Superblocks
EOR provider Velocity Global is leading the future of borderless work by helping organizations onboard global talent in more than 185 countries. The company offers a full spectrum of HR and payroll solutions, including talent acquisition, payroll administration, benefits management, and vacation time oversight, all while ensuring the highest compliance standards and strict adherence to local governmental regulations.
