Build apps with Fabric API for GraphQL with code generation, intelliSense in VS Code

[mk_sunitha]

Are you looking to build apps with API for GraphQL in fabric, then here is the blog from Alekhya Polavarapu, Senior Software Engineer at Microsoft to get your started. This guide walks you through building a front-end application using React, Apollo Client, and TypeScript, integrated with a GraphQL API hosted in Microsoft Fabric. It highlights how to integrate and configure useful local tools like auto-completion and code generation, focusing on delivering an intuitive and seamless developer experience with GraphQL. 

Prerequisites 

• Go to Fabric portal 
• Create a SQL database in Fabric: 
  • In your Fabric workspace, select New Item then SQL database. 
  • Give your database a name, then select Sample data to create all the required tables and data in your database. 
• Create a GraphQL API: 
  • You just need to click the New API for GraphQL button in the SQL Database item toolbar and give your API a name. 
  • Next select all the SalesLT tables and select load. 

 

Application setup 

• Clone the React starter application for reference with all the necessary files and dependencies in place (or use your own React project). 
• Install required packages for code generation defined in the `package.json` file:  

npm install 

• Install the VSCode extension: GraphQL: Language Feature Support 

 

Obtaining the GraphQL schema  

• Static file: Export the schema from Microsoft Fabric using the Export Schema button.  This will download a Graphql schema that you can use in your application. 
• Remote endpoint: Copy the GraphQL endpoint and include an authorization token in your configuration. You can retrieve a valid Authorization token for testing purposes from the GraphQL API in the Fabric portal by opening your browser’s developer tools (usually by pressing F12), navigating to the console tab and executing the command “powerBIAccessToken”. This will display your user’s access token for the current portal session. In case you’re using Service Principals in a backend service, refer to the instructions and scripts to retrieve tokens in our documentation. 

Configuring intelliSense and autocompletion 

IntelliSense and autocompletion are essential tools for developers because they dramatically speed up coding by reducing errors, suggesting relevant code snippets, and providing real-time feedback on available fields and types. This not only increases productivity but also helps ensure that your queries and code remain consistent and up-to-date as your application evolves. 

Depending on how you’re retrieving the schema, create a .graphqlrc.yml or graphql.config.yml at the root of the project. 

Static File: 

schema: './schema.graphql' 
documents: 'src/**/*.{ts,tsx,graphql,gql}' 

Remote Endpoint: 

schema: 
  - https://your-graphql-endpoint.com/graphql: 
      headers: 
        Authorization: Bearer YOUR_ACCESS_TOKEN 

Documents: src/**/*.{ts,tsx,graphql,gql} 

 After creating the configuration file, navigate to any relevant file where you plan to write GraphQL queries and observe the IntelliSense functionality. 

Intellisense for API for graphql

 

Configuring code generation 

GraphQL code generation (codegen) is highly beneficial for developers because it automatically creates strongly-typed code, reducing manual effort and minimizing errors when working with queries, mutations, and types. By generating TypeScript types and React hooks directly from your schema and operations, codegen streamlines development, ensures consistency with your backend, and accelerates the integration of GraphQL into your application. 

Create a codegen.yml file at the root the project: 

 

schema: './schema.graphql' 
documents: './src/**/*.graphql' 
generates: 
  src/generated/graphql.tsx: 
    plugins: 
      - typescript 
      - typescript-operations 
      - typescript-react-apollo 
    config: 
      withHooks: true 

• schema: File path or remote API call with necessary headers. 

• documents: Global path for locating all GraphQL operation files. 

• generates: Output file for generated code. 

• plugins: Determines what will be generated; in this example, TypeScript types and React Apollo hooks. 

Writing graphQL operations

Write your queries and mutations in .graphql files leveraging the newly implemented IntelliSense and auto-completion support.

query GET_CUSTOMERS($after: String, $first: Int, $filter: CustomerFilterInput, $orderBy:    CustomerOrderByInput) { 

    customers(after: $after, first: $first, filter: $filter, orderBy: $orderBy) { 
        items { 
            CustomerID 
            FirstName 
            LastName 
        } 
    } 
}   
mutation ADD_CUSTOMER($input: CreateCustomerInput!) { 
    createCustomer(item: $input) { 
        CustomerID 
        FirstName 
        LastName 
        Title 
        Phone 
        PasswordHash 
        PasswordSalt 
        rowguid 
        ModifiedDate 
        NameStyle 
    } 
}

Generating types and hooks

In order to take advantage of codegen, add a script to the package.json file:

"scripts": {
. . . 
"codegen": "graphql-codegen --config codegen.yml"
}

Run npm run codegen in your terminal. The output of codegen looks like this

run codegen in your terminal

Using generated types

Use the generated hooks in your React components and access the API with a popular GraphQL client such as the Apollo client.

use genrated types

Configuring authentication for your application

Before testing the React application, you need to configure some authentication parameters. Add the required parameters in the “authConfig.ts” file following the steps in the "Create a Microsoft Entra app" section in the documentation. Once you have gathered the necessary credentials, update the respective details in the designated file to enable authenticated access to the API.

setup entra id in your app

Launching the Application

Now we’re ready to test the React app locally by executing the following command npm run dev. Your browser will launch and a pop-up prompts the user for credentials and any necessary consent to access and display the API data.

Browse your app using api for graphql

Conclusion

API for GraphQL gives you a secure way to connect to your data in Fabric from a front-end application. For more information, make sure to check our documentation. Stay tuned for more updates and enhancements in the future!