Talk given at Longhorn PHP 2019

1. @AndrewRota | Longhorn PHP 2019

2. APIs are important
Native Mobile Apps
Web browsers
(http requests from JavaScript)
External API
API

3. Native Mobile Apps
Web browsers
External API
API
article
comment
comment
author
author
author

4. Native Mobile Apps
Web browsers
External API
API
article
comment
comment author

5. Native Mobile Apps
Web browsers
External API
APIgetBlog

6. Challenges with APIs Today
‣
‣
‣

8. @AndrewRota
Associate Director, Software Engineering

9. “GraphQL is a query
language for APIs and a
runtime for fulfilling those
queries with your existing
data.”

10. {
conferences {
name
dates
}
}
"conferences": [
{
"name": "LonghornPHP",
"dates": "May 2 - 4, 2019"
}
]

11. {
conferences {
name
speakers {
name
twitter
}
}
}
{
"conferences": [
{
"name": "LonghornPHP",
"speakers": [
{
"name": "Andrew Rota",
"twitter": "https://twitter.com/andrewrota"
}
]
}
]
}

12. Topics
‣
‣
‣
‣
‣
‣

13. GraphQL
‣
‣
‣

14. GraphQL Implementations
‣ technology agnostic
‣
‣

15. GraphQL Advantages
‣
‣
‣
‣

16. GraphQL in a web stack
QueryClient
(e.g., browser, mobile
app)
/graphql on
PHP Server
response
Database

17. GraphQL in a web stack
QueryClient
(e.g., browser, mobile
app)
/graphql on
PHP Server
response
Cache
Service
Database

18. GraphQL in a web stack
QueryClient
(e.g., browser, mobile
app)
/graphql
server
response
Cache
REST Service
Database
PHP

20. Queries + Fields
‣
fields
‣
same shape
query {
conferences {
name
dates
}
}
query
field

21. Fields
‣
‣
sub-selection
‣ avoid
multiple requests
query {
conferences {
name
speakers {
name
}
}
}
sub-selection

22. Arguments
‣
arguments each field {
conference(name: "LonghornPHP") {
speakers {
name
}
}
}
argument

23. Variables
‣
query SearchConfs($name: String){
conferences(nameFilter:$name) {
name
}
}
{"name": "LonghornPHP"}

24. Types + Schemas
‣
set of types

25. Types + Schemas
‣
type Conference {
name: String!
url: String!
description: String
location: String
dates: String!
# List of speakers at this conference
speakers: [Speaker]
}

26. Types + Schemas
‣
‣
type Conference {
name: String!
url: String!
description: String
location: String
dates: String!
# List of speakers at this conference
speakers: [Speaker]
}
non-nullable
scalar type
list of
object
types

27. Query + Mutation Types
‣
Query Mutation
‣ Root fields
entry points
type Query {
# Returns conferences
conferences: [Conference]
# Returns speakers
speakers: [Speaker]
}
root
fields
root type

28. Queries
‣
‣
‣
query ConferenceNamesAndDates{
conferences {
name
dates
}
}
operation nameoperation type
fields

29. Mutations
‣
‣ mutation
mutation {
addSpeaker(
name: "Andrew Rota",
twitter: "https://twitter.com/andrewrota")
{
id
}
}

32. Queries from JavaScript
‣
‣
query ConferenceNamesAndDates{
conferences {
name
dates
}
}

33. Lokka
a simple graphql client library
‣ const t = new HttpTransport('/graphql');
t.send(`query ConferenceNamesAndDates{
conferences {
name
dates
}
}`).then(response => {
console.log(response);
});

34. Apollo
complete data management solution
‣
‣
‣
‣
‣
<Query client={client} query={CONFERENCES_QUERY}>
{({ loading, error, data }) => {
if (loading) return 'Loading...';
if (error) return `Error!`;
return (
<ul>
{data.conferences.map(conference => (
<li>{conference.name}</li>
))}
</ul>
);
}}
</Query>

38. graphql-php
‣
‣
‣
‣
implementation of the
GraphQL spec in PHP

40. Handle queries
‣
‣ Schema
‣ GraphQL::executeQuery
$schema = new Schema([
'query' => Types::query()
]);
$result = GraphQL::executeQuery(
$schema,
$requestData['query'],
null,
$appContext,
(array)$requestData['variables']
);
$output = $result->toArray();

41. Query.

42. Root fields
‣
fields
‣ type
resolve
use GraphQLTypeDefinitionObjectType;
use GraphQLTypeDefinitionType;
$queryType = new ObjectType([
'name' => 'Query',
'fields' => [
'message' => [
'type' => Type::string(),
'resolve' => function () {
return 'hello world';
}
],
]
]);

43. Fields can return objects
‣
‣
$queryType = new ObjectType([
'name' => 'Query',
'fields' => [
'conferences' => [
'type' => Types::listOf(Types::conference()),
'description' => 'Returns conferences',
'resolve' => function() {
return DataSource::getConferences();
}
],
'message' => [
'type' => Type::string(),
'resolve' => function () {
return 'hello world';
}
],
]
]);

44. Resolvers
‣
‣
‣
‣
$queryType = new ObjectType([
'name' => 'Query',
'fields' => [
'conferences' => [
'type' => Types::listOf(Types::conference()),
'description' => 'Returns conferences',
'resolve' => function() {
return DataSource::getConferences();
}
],
'message' => [
'type' => Type::string(),
'resolve' => function () {
return 'hello world';
}
],
]
]);

45. resolve function
function($root, $args, $context, ResolveInfo $info) {
return DataSource::getData($root->id);
}
root / parent
result
arguments app context
query AST and
other meta info

48. Custom object type
‣
$config = [
'name' => 'Conference',
'fields' => [
'name' => Type::nonNull(Types::string()),
'url' => Type::nonNull(Types::string()),
'location' => Types::string(),
]
];

49. Custom object type
‣
‣
$config = [
'name' => 'Conference',
'fields' => [
'name' => Type::nonNull(Types::string()),
'url' => Type::nonNull(Types::string()),
'location' => Types::string(),
'speakers' => [
'type' => Types::listOf(Types::speaker()),
'resolve' => function($root) {
return DataSource::getSpeakersAtConf($root->id);
}
]
]
];

52. n+1 problem
‣
{
conferences {
name
speakers{
name
}
}
}

53. Solution: deferred resolvers
‣
‣
‣
'resolve' => function($root) {
SpeakerCollection::add($root->id);
return new Deferred(function() use ($root) {
return SpeakerCollection::get($root->id);
});
}

54. Limiting Query Complexity and Depth
‣
‣

55. Persisted Queries
queryClient Server
query {
conferences {
name
dates
}
}
idClient Server{ id: 001 }
‣
‣
‣
‣
With persisted queries:

57. Introspection
‣
‣
‣
{
"data": {
"__schema": {
"queryType": {
"name": "Query"
},
"types": [
{
"kind": "OBJECT",
"name": "Query",
"description": null,
"fields": [
{
"name": "conferences",
"description": "Returns a list of PHP conferences",
"args": [],
"type": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Conference",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
]
}
]
}
}
}

58. GraphiQL - in browser IDE for exploring GraphQL

59. Graphql Playground - like GraphiQL, but more features

60. Voyager - Any GraphQL API as an interactive graph

61. PHPStorm JS GraphQL Plugin - IDE Integration

62. Types can be used in client-side code
‣
Apollo Codegen
‣

67. @AndrewRota
Resources
‣
‣
‣
‣