GraphQL ‐ Code Snippets - jcmings/sn GitHub Wiki

If you're here, you've probably read my post on The power of GraphQL: optimizing performance. If not, click on that, and this will all make more sense! This post contains all of the code from that project.

Widget code

HTML

<div>
  <button class='btn btn-primary' ng-click="c.lookupRecords()">Load records</button>
  
<table>
    <thead>
      <tr>
        <th class='inc-number'>Incident number</th>
        <th class='inc-desc'>Short description</th>
      </tr>
    </thead>
    <tbody>
      <!-- Display No data row if incidents is empty -->
      <tr ng-if="!c.incidents || c.incidents.length === 0">
        <td colspan="2">No data</td>
      </tr>
      <!-- Otherwise display each incident -->
      <tr ng-repeat="incident in c.incidents">
        <td>{{ incident.number.display_value }}</td>
        <td>{{ incident.short_description.display_value }}</td>
      </tr>
    </tbody>
  </table>
  
</div>

CSS

table {
  width: 80%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
}
th {
  background-color: #f4f4f4;
}
.inc-number {
  width: 25%;
}
.inc-desc {
  width: 75%;
}

button {
  margin: 15px;
}

Client script

NOTE: We are passing through $http in the controller!

api.controller=function($http) {
	/* widget controller */
	var c = this;

	c.lookupRecords = function() {
		
		query = {};
		query.query = 'query { x700455 { incidentReturnGraphQL { getAllRecords { sys_id { value display_value } number { value display_value } assigned_to { reference { sys_id { value display_value } user_name { value display_value } first_name { value display_value } last_name { value display_value } } value display_value } short_description { value display_value } } } } }';
		$http.post('/api/now/graphql', query).then(function(response) {
			var returnedData = response.data.data.x700455.incidentReturnGraphQL.getAllRecords;
			c.incidents = returnedData;
			console.log(returnedData);
		});

	}

};

GraphQL code

Schema

# Comment using a single hashtag
schema {
    query: Query
    mutation: Mutation
}

type Query { # Queries are used to GET the record
	getAllRecords: [Incident] # This means we want to return a list of incidents
	
}

type Mutation { # Mutations are used for inserts, updates, deletes
    #implement here...
}

type DisplayableString { # We use this because we want a display value and system value
	value: String # Here we just defined that the response for the 'value' should be a String
	display_value: String
}

type Incident {
	sys_id: DisplayableString # This will "tree" one layer farther down to display value + displayValue from line 16
	number: DisplayableString
	assigned_to: UserReference # We want the response to be a reference to User
	short_description: DisplayableString
}

# We have a UserReference type, which itself contains a reference to the final object of User
# This can get us a display value of the user reference (e.g. their full name) and then "tree" one layer further with the reference
type UserReference {
	reference: User
	value: String
	display_value: String
}

type User { # This is where we define the types of data we want back on the actual user
	sys_id: DisplayableString
	user_name: DisplayableString
	first_name: DisplayableString
	last_name: DisplayableString
}

getAllRecords Scripted Resolver

(function process(/*ResolverEnvironment*/ env) {

    // implement data resolver here
	var gr = new GlideRecord('incident');
	gr.addEncodedQuery('priority=4');
	gr.query();

	return gr;

})(env);

getUser Scripted Resolver

(function process(/*ResolverEnvironment*/ env) {

    // implement data resolver here
	var gr;
	var userId = env.getSource().value;
	
	if (userId) {		
		gr = new GlideRecord('sys_user');
		gr.addQuery('sys_id', userId);
		gr.query();
	}
	
	return gr;

})(env);
⚠️ **GitHub.com Fallback** ⚠️