Connect to Linear Data from Blazor Apps

Blazor is a framework for developing modern, client-side web UIs using .NET technology. Instead of coding in JavaScript, developers can use the familiar C# language and .NET libraries to build app UIs.

The CData ADO.NET Provider for Linear can be used with standard ADO.NET interfaces, such as LINQ and Entity Framework, to interact with live Linear data. Since Blazor supports .NET Core, developers can use CData ADO.NET Providers in Blazor apps. In this article, we will guide you to build a simple Blazor app that talks to Linear using standard SQL queries.

Install the CData ADO.NET Provider for Linear

CData ADO.NET Providers allow users to access Linear just like they would access SQL Server, using simple SQL queries.

Install the Linear ADO.NET Data Provider from the CData website or from NuGet. Search NuGet for "Linear ADO.NET Data Provider."

Create a Linear-Connected Blazor App

Start by creating a Blazor project that references the CData ADO.NET Provider for Linear

1. Create a Blazor project on Visual Studio.

2. From the Solution Explorer, right click Dependencies, then click Add Project Reference.
3. In the Reference Manager, click the Browse button, and choose the .dll file of the installed ADO.NET Provider (e.g. System.Data.CData.Linear.dll, typically located at C:\Program Files\CData\CData ADO.NET Provider for Linear\lib etstandard2.0).

SELECT Linear Data from the Blazor App

1. Open the Index.razor file from the Project page.
2. In a LinearConnection object, set the connection string:

   You can authenticate to Linear with a personal API key or with OAuth 2.0. The API key is the simplest option for connecting with your own Linear account.

   Authenticating with an API Key

   Set the following connection properties:

   • AuthScheme: Set this to APIKey.
   • APIKey: A Linear personal API key.

   To create a personal API key, log in to Linear, open Settings > Security & access > Personal API keys, select New API key, and create it. Copy the key immediately, because Linear shows it only once.

   Authenticating with OAuth

   OAuth requires a custom OAuth application registered in Linear (Settings > API > OAuth applications), which provides the OAuthClientId and OAuthClientSecret. Two flows are supported:

   • Authorization code: Set AuthScheme to OAuth, InitiateOAuth to GETANDREFRESH, and provide OAuthClientId, OAuthClientSecret, and the CallbackURL defined in your application (e.g., http://localhost:33333). The driver opens Linear in your browser so you can grant access.
   • Client credentials: Set AuthScheme to OAuthClient and provide OAuthClientId and OAuthClientSecret. This authenticates the application itself, with no browser interaction, and suits machine-to-machine integrations.

   By default, the driver requests the read,write scopes. The driver refreshes the access token automatically when it expires.

   For example: AuthScheme=APIKey;APIKey=myAPIKey;

3. The code below creates a simple Blazor app for displaying Linear data, using standard SQL to query Linear just like SQL Server.

         @page "/"
         @using System.Data;
         @using System.Data.CData.Linear;
         
         <h1>Hello, world!</h1>
         
         Welcome to your Data app.
         
         <div class="row">
             <div class="col-12">
         
                 @using (LinearConnection connection = new LinearConnection(
                   "AuthScheme=APIKey;APIKey=myAPIKey;"))
                 {
                     var sql = "SELECT id, name FROM Team WHERE key = 'ENG'";
                     var results = new DataTable();
         
                     LinearDataAdapter dataAdapter = new LinearDataAdapter(sql, connection);
                     dataAdapter.Fill(results);
         
                     <table class="table table-bordered">
                         <thead class="thead-light">
                             <tr>
                                 @foreach (DataColumn item in results.Rows[0].Table.Columns)
                                 {
                                     <th scope="col">@item.ColumnName</th>
                                 }
                             </tr>
                         </thead>
                         <tbody>
                             @foreach (DataRow row in results.Rows)
                             {
                                 <tr>
                                     @foreach (var column in row.ItemArray)
                                     {
                                         <td>@column.ToString()</td>
                                     }
                                 </tr>
                             }
                         </tbody>
                     </table>
                 }
             </div>
         </div>
       

4. Rebuild and run the project. The ADO.NET Provider renders Linear data as an HTML table in the Blazor app.

   At this point, you have a Linear-connected Blazor app, capable of working with live Linear data just like you would work with a SQL Server instance. Download a free, 30-day trial and start working with live Linear data in your Blazor apps today.