Events
Show
let queryString = `
query Event($id: ID!) {
event(id: $id) {
id
name
summary
description
startDate
endDate
address {
streetAddress
postalCode
addressLocality
addressRegion
}
organizer {
id
name
}
}
}`;
query(queryString, { id: 2 })
.then( (response) => {
console.log(JSON.stringify(response, null, 2));
});
/* response */
{
"data": {
"event": {
"id": "2",
"name": "event 0: A summary of an event",
"summary": "event 0: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
}
}Index
Shows a set of events in manageable chunks. Can be used to load events on demand for pagination/infinite scroll. There is an explanation of how connections work in comments.
let queryString = `
query EventConnection($first: Int, $after: String) {
eventConnection(first: $first, after: $after) {
pageInfo {
hasNextPage
endCursor
}
edges {
cursor
node {
id
name
summary
description
startDate
endDate
address {
streetAddress
postalCode
addressLocality
addressRegion
}
organizer {
id
name
}
}
}
}
}`;
/* return the first block of events */
query(queryString, {first: 5})
.then( (response) => {
console.log(JSON.stringify(response, null, 2));
});
/* first response */
"data": {
"eventConnection": {
"pageInfo": {
"hasNextPage": true
},
"edges": [
{
"cursor": "MQ",
"node": {
"id": "2",
"name": "event 0: A summary of an event",
"summary": "event 0: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
},
{
"cursor": "Mg",
"node": {
"id": "3",
"name": "event 1: A summary of an event",
"summary": "event 1: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
},
{
"cursor": "Mw",
"node": {
"id": "4",
"name": "event 2: A summary of an event",
"summary": "event 2: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
},
{
"cursor": "NA",
"node": {
"id": "5",
"name": "event 3: A summary of an event",
"summary": "event 3: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
},
{
"cursor": "NQ",
"node": {
"id": "6",
"name": "event 4: A summary of an event",
"summary": "event 4: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
}
]
}
}
}
/*
Notes on connection pagination:
Cursors are GraphQL's way of identifying a record in a connection.
They act like IDs but are more complicated for reasons.
Input parameters
first: limit the number of records to return
after: only fetch records that follow on from this cursor
In the response each record is wrapped in an 'edge' that contains
the GQL cursor identifier.
pageInfo:
hasNextPage: (boolean) there are records that follow from this block
endCursor: (string) the cursor of the last record retrieved
*/
/* then to get the next block of events */
query(queryString, {first: 5, after: "NQ"})
.then( (response) => {
console.log(JSON.stringify(response, null, 2));
});
/* second response */
{
"data": {
"eventConnection": {
"pageInfo": {
"hasNextPage": true
},
"edges": [
{
"cursor": "Ng",
"node": {
"id": "7",
"name": "event 5: A summary of an event",
"summary": "event 5: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
},
{
"cursor": "Nw",
"node": {
"id": "8",
"name": "event 6: A summary of an event",
"summary": "event 6: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
},
{
"cursor": "OA",
"node": {
"id": "9",
"name": "event 7: A summary of an event",
"summary": "event 7: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
},
{
"cursor": "OQ",
"node": {
"id": "10",
"name": "event 8: A summary of an event",
"summary": "event 8: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
},
{
"cursor": "MTA",
"node": {
"id": "11",
"name": "event 9: A summary of an event",
"summary": "event 9: A summary of an event",
"description": "A longer description of this event",
"startDate": "2022-02-10 00:00:00 +0000",
"endDate": null,
"address": {
"streetAddress": "123 A Street, A place",
"postalCode": "SE2 0QG",
"addressLocality": "Belvedere",
"addressRegion": "London (region)"
},
"organizer": null
}
}
]
}
}
}Filter
Events can be filtered by date range, neighbourhood or tag. All events are returned in ascending order of start date.
let queryString = `
query EventsByFilter(
$fromDate: String,
$toDate: String,
$neighbourhoodId: Int,
$tagId: Int)
{
eventsByFilter(
fromDate: $fromDate,
toDate: $toDate,
neighbourhoodId: $neighbourhoodId,
tagId: $tagId)
{
id
name
summary
description
startDate
endDate
address {
streetAddress
postalCode
addressLocality
addressRegion
}
organizer {
id
name
}
}
}`;
/*
notes on event filter
The filter has the following parameters:
fromDate: the initial start point. defaults to
date request was made. can be in the past.
format is YYYY-MM-DD HH:MM
toDate: the end limit of query. must be after fromDate
neighbourhoodId: scope events to be in a
neighbourhood. returns events in BOTH
the address and service area.
tagId: scope events to only one tag
*/
query(queryString)
.then( (response) => {
console.log(JSON.stringify(response, null, 2));
});
/* response */
{
"data": {
"eventsByFilter": []
}
}Some sample GQL queries that show the various input fields. The fields can be combined in one query.
# default query with no args
query {
eventsByFilter {
id
name
startDate
}
# query with fromDate
query {
eventsByFilter(fromDate: "1985-01-01 00:00") {
id
name
startDate
}
# query with fromDate and toDate
query {
eventsByFilter(fromDate: "1990-01-01 00:00", toDate: "1990-03-01 00:00") {
id
name
startDate
}
# query with neighbourhoodId
query {
eventsByFilter(neighbourhoodId: 123) {
id
name
}
}
# query with tagId
query {
eventsByFilter(tagId: #{have_tag.id}) {
id
name
}
}Last updated