Unlock the Power of GraphQL in Your Blazor Application
With a remarkable 94% satisfaction rate among developers, GraphQL is rapidly becoming the go-to API choice for web applications. Its promise of improved performance has led to widespread adoption across various scales. In this tutorial, we’ll explore how to integrate a GraphQL API into a Blazor WebAssembly application, focusing on the integration process rather than performance impact.
Getting Started
Before we dive in, ensure you have a basic understanding of C# and have the.NET SDK installed on your local machine.
What is GraphQL?
GraphQL, short for Graph Query Language, is an API technology that enables clients to fetch data from a server in a declarative manner. By requesting the exact data needed through a query, GraphQL allows for more efficient data retrieval. There are three primary operations you can execute against a GraphQL server:
- Query: Similar to the GET HTTP verb in a REST API, which fetches data from a server.
- Mutation: Similar to the POST, UPDATE, and DELETE HTTP verbs within a REST API.
- Subscription: Connects to the GraphQL server to refetch data without restarting the connection.
Setting Up the GraphQL API
To begin, clone the GraphQL application from its GitHub repository using the Git CLI from your terminal. Then, execute the commands to change the terminal’s current directory into the cloned blazor-graphql-api project and install the dependencies listed in the package.json file. Finally, start the application using the command below:
node index.js
This will execute the index.js file, which uses ApolloServer to run the GraphQL server on your localhost, making it accessible at port 4000. Keep the GraphQL application running throughout this tutorial, as we’ll use the GraphQL API later on.
Bringing GraphQL to Blazor
Blazor is an open-source framework that enables developers to build interactive user interfaces using C# by leveraging WebAssembly. This allows code that’s not JavaScript to execute in a browser. We’ll use the graphql-dotnet library, which has a quicker setup to get started.
Creating a Demo Blazor Application
Let’s bootstrap a new Blazor application with the default boilerplate pages and rewrite the FetchData.razor page to use data fetched from a GraphQL API. Execute the command below from your local terminal to create a new Blazor application:
dotnet new blazorwasm -n Graphql-blazor
Next, add the package references below into the new project using the dotnet CLI:
dotnet add package GraphQL.Client
dotnet add package GraphQL.SystemTextJson
These packages connect the Blazor application to a GraphQL API.
Defining the GraphQL Data
To store and structure the data returned from each GraphQL operation, we must create classes with fields and properties. One way to know the schema definition of a GraphQL API is by introspecting the GraphQL API schema. Most GraphQL APIs have a Playground that allows users to write and execute GraphQL operations against the API.
Switching to Mutations
Executing the literal in the code block below from the GraphiQL playground executes a mutation operation against the GraphQL API to create a country.
Creating a Singleton Service
Next, we must create a custom Singleton service containing a class to create the GraphQL Client. This connects the application to the cloned GraphQL application through its URL endpoint. Methods also send GraphQL operations through the connected API.
Creating a GraphQL Query
With the GraphQL client instance available within the GraphqlService class, we can use the instance to send a GraphQL Query operation.
Creating a GraphQL Mutation
In addition to the GraphQL query, we want to insert more country data into the GraphQL application. This can be done by implementing a mutation within the GraphqlService class.
Rebuilding the FetchData Page
So far, we created a GraphqlService class containing two methods to send a mutation and query operation, respectively. We are now left with executing these methods from the fetchData page.
Testing the Application
Open the fetchData page in your local browser at http://localhost:5000/fetchdata to view the new changes. Now we are left with inserting a new country through a mutation from the fetchData page.
Conclusion
At this point, the entire application has been fully rebuilt to use a GraphQL API. You can repeat the process of creating new countries using the input fields to add more data.