Start using GraphQL with OSS LWC

June 9, 2021July 22, 2023
by Yuval Vardi

In this article we will explorer the use of GraphQL along with Express server within our LWC OSS app.

What is it ?

GraphQL is a data language and an API technology. Originally developed by Facebook later on has moved to be open-sourced .

When it comes to building API’s to your app data points, many wonder what would be the ideal way?

Using REST API would be the current modern convention, but GraphQL really stands out as an alternative architecture mainly (but not only) because it provides a “discoverable API” by design.

It also comes with its own query language and a runtime engine for fulfilling queries via functions called resolvers.

High level benefits :

One unified API to consume data and perform your calls against.
- Allows the Client to define the structure of data in payloads.
No Over-Fetching or Under-Fetching – you only get the data you specify – nothing less and nothing more.
Allows a better Client side development experience
- Strongly Typed with advanced intellisense features in IDE.
Scalable and easy to maintain.

With those great benefits there are a few draw backs in my opinion you should consider before migrating your entire REST API infra-structure into GraphQL.

There is a Learning Curve for learning how to set up and start running and specially when it comes to optimization at scale.
Infrastructure and Tooling might be different in some levels.

High level Design for our app

Our Client app will generate a POST call to a single endpoint.
The payload body will hold the query to retrieve all fields defined in the schema.
GraphQL basically intercept the call from the defined endpoint and perform all other calls it needs in an efficient way that returns all values you expect and defined inside your schema.
All will be done in a single callout – which is really cool and efficient.

Breakdown Steps

Express Server will be setup with an endpoint
graphql will be imported and we will set it up as a separate JS module
This will be example in Javascript but can be in TS.
our schema will basically operate the entire Graph output payload to your client.

Install packages: (assuming we have express installed)

npm i graphql
npm i express-graphql

Add GraphQL as Url route in our Express server

Setup GraphQL Endpoint

We will expose an endpoint that can receive the GraphQL Queries
Go to your server.js file

const express = require("express");
const compression = require("compression");
const helmet = require("helmet");
const path = require("path");
const { graphqlHTTP } = require("express-graphql");
const rootSchema = require("./schema/root");

const app = express();
app.use(helmet(), compression(), express.json());

const HOST = process.env.HOST || "localhost";
const PORT = process.env.PORT || 5000;
const SERVER_URL = `http://${HOST}:${PORT}`;

// const DIST_DIR = './dist';
   const DIST_DIR = "./src/client";

// fetching the graphQl schema - This is also the endpoint for graphiql playground when set to true. 
app.use("/graphql", async (req, res) => {

      graphqlHTTP({ 
          schema: rootSchema, 
          graphiql: true, 
          context: req 
      })(req, res);
});


app.use(express.static(DIST_DIR));
app.use("*", (req, res) => {
     res.sendFile(path.resolve(DIST_DIR, "index.html"));
});
app.listen(PORT, () => console.log(` API Server started: ${SERVER_URL}`));

Build your GraphQL Schema and Hello World Query

Build your GraphQL Schema

Create a new JS file to hold your RootSchema : /schema/root.js
We are exporting this Object as a GraphQLSchema – This is where we can write our first graph query.
This will be simple for a Hello World Example
We have a method named hello
That receive a String input argument named message
Then Output the same Message as string.
Thats a GraphQL Query method – we will explorer mutation later.

const { GraphQLString, GraphQLObjectType, GraphQLSchema, GraphQLList } = require('graphql');

       // INCLUDE FOR SALESFORCE CONNECTION
       // const jsforce = require('jsforce');
       // require('dotenv').config();
       // const { LOGIN_URL, CLIENT_KEY, CLIENT_SECRET, REDIRECT_URL } = process.env;

       // INCLUDE FOR REST CLIENT CALLS
       // const axios = require('axios').default;
       // const SERVER_URL = 'http://localhost:3001';

const RootQuery = new GraphQLObjectType({
                    name: 'RootQueryType',
                    description: 'Root Mother of all queries',
                    fields: {
                        // calls query methods
                        hello: {
                            type: GraphQLString,
                            args: {
                                message: { type: GraphQLString }
                            },
                            async resolve(
                                parentValue, args, context
                            ) {
                                return args.message;
                            }
                        },
                    }
        });

module.exports = new GraphQLSchema({
                    query: RootQuery
                });

Client Rest call to GraphQL

Settings a Fetch Api Service on your LWC modules

This will be a reusable function we can call from each component to invoke our GraphQL endpoint with any query given.

const graphEndpoint = '/graphql';

export async function getData(query) {
    console.log('running query ' + query.query);
    try {
        const response = await fetch(graphEndpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json'
            },
            body: JSON.stringify(query)
        });
        return response.json();
    } catch (e) {
        return e;
    }
}

Setup a UI Lightning Button to call GraphQL

Lets set it up inside our main app component.

Go to your component – app.js

import { LightningElement, api } from 'lwc';
// our services method
import { getData } from '../../data/services/services';

export default class App extends LightningElement {

    message = 'Whoo hooo!!';
    response = '';
    // button click
    handleClick(event) {
        console.log('fire');

        const baseQuery = {
            query: `{
                hello(message:"${this.message}")
            }`
        };
        this.fetchData(baseQuery);
    }

    // get Data
    async fetchData(query) {
        try {
            const response = await getData(query);
            if (response) {
                console.log('SUCCESS ' + JSON.stringify(response));
                this.response = JSON.stringify(response);
            }

        } catch (err) {
            console.log('error : ' + JSON.stringify(err));
        }
    }
}

Inside our app.html

<template>
      <div class="slds-grid slds-grid_vertical slds-grid_vertical-align-center ">
          <lightning-button label="Call GraphQL" variant="brand" onclick={handleClick}></lightning-button>
          <lightning-textarea value={response} class="slds-size_1-of-1" disabled></lightning-textarea>
      </div>
</template>

Using graphql to build your queries

You can go into `http://localhost:3001/graphql` to see the query builder.

LWC Open Source – Connection to Salesforce

yuval

Technical Architect and Software Engineer Specialise in Salesforce and Cloud Architecture.

oss