GraphQL

query {
  publication(slug: "foo", groupSlug: "bar") {
    id
    slug
    groupSlug
    title
    description
    layout
    language
    downloadPdfUrl
    currency
    customCurrency
    sizes {
      at
      width
      height
    }
    spreads {
      edges {
        cursor
        node {
          pages {
            images {
              size
              url
            }
          }
          hotspots {
            height
            left
            top
            tabIndex
            width
            zIndex
            __typename
            ... on Hotspot {
              height
              left
              top
              tabIndex
              width
              zIndex
            }
            ... on ProductHotspot {
              products {
                id
                title
                availability
                price
                description
                position
                discountedPrice
                webshopUrl
                webshopIdentifier
                productType
                brand
                gtin
                mpn
                customLabel0
                customLabel1
                customLabel2
                customLabel3
                customLabel4
                itemGroupId
                videoId
                videoProvider
                photoUrls {
                  thumb
                  full
                }
              }
            }
            ... on ExternalLinkHotspot {
              url
            }
            ... on ImageHotspot {
              url
              imageAltText
              imageShowLightbox
              contentFitMode
            }
            ... on PageReferenceHotspot {
              pageNumber
            }
            ... on SlideshowHotspot {
              autoplay
              backgroundColor
              slideshowItems {
                url
              }
            }
            ... on VideoHotspot {
              videoId
              videoUrl
              videoProvider
              videoOverlayContent
              videoAutoplay
              videoShowPreview
              videoLoop
            }
          }
        }
      }
    }
  }
}

Here is an example of a publication by slug query containing all the supported fields. References for each field, type, and object can be found below in GraphQL References.

Pagination

query {
  publication(id: 1000) {
    spreads {
      edges {
        cursor
        node {
          hotspots {
            left
            top
          }
        }
      }
    }
  }
}

Entities having a related Edge object are paginated using cursors. Each page returns a cursor that points to the next batch of items. For the time being, only Spreads are paginated. The maximum number of items per page is 50.

For more details on how to use cursor-based pagination, read the official GraphQL docs.

Here is a simple query showing how to fetch paginated items (in this case, spreads).

Pagination response

{
  "data": {
    "publication": {
      "spreads": {
        "edges": [
          {
            "cursor": "MQ",
            "node": {
              "hotspots": [
                {
                  "left": 0.2181974544203647,
                  "top": 0.28071539657853817
                },
                {
                  "left": 0.7932750947750123,
                  "top": 0.9113263785394933
                },
                {
                  "left": 0.10825773919372027,
                  "top": 0.060517038777908344
                }
              ]
            }
          },
          {
            "cursor": "Mg",
            "node": {
              "hotspots": [
                {
                  "left": 0.5865075571525111,
                  "top": 0.4807445442875482
                },
                {
                  "left": 0.05432514161591209,
                  "top": 0.09948652118100128
                },
                {
                  "left": 0.14557201958101892,
                  "top": 0.589418777943368
                },
                {
                  "left": 0.5865075571525111,
                  "top": 0.2749627421758569
                }
              ]
            }
          },
          {
            "cursor": "Mw",
            "node": {
              "hotspots": [
                {
                  "left": 0.11709053748908045,
                  "top": 0.6162444113263785
                },
                {
                  "left": 0.7531604885365332,
                  "top": 0.3211624441132638
                }
              ]
            }
          }
        ]
      }
    }
  }
}

The above query returns the following result.

Using the pagination cursor

query {
  publication(id: 1000) {
    spreads(after: "Mw") {
      edges {
        cursor
        node {
          hotspots {
            left
            top
          }
        }
      }
    }
  }
}

To get the next batch of items after the last one, the next query should include an after argument for the spreads block, passing the last cursor as value.

When there are no more items, the edges object array will be empty.

GraphQL References

Below are the specifications for each supported field and object.

Query

Field	Type	Description
publication	Publication	Finds a publication by ID or by both slug and the group slug
id	ID
groupSlug	String
slug	String
publicationByUrl	Publication	Finds a publication by URL
url	String!

Objects

ExternalLinkHotspot

A hotspot with an external link

Field	Argument	Type	Description
height		Float!
id		ID!
left		Float!
tabIndex		Int
top		Float!
url		String
width		Float!
zIndex		Int

Image

An image from a page

Field	Argument	Type	Description
size		String
url		String

ImageHotspot

An image hotspot

Field	Argument	Type	Description
contentFitMode		String
height		Float!
id		ID!
imageAltText		String
imageShowLightbox		Boolean
left		Float!
tabIndex		Int
top		Float!
url		String
width		Float!
zIndex		Int

ImageSize

Field	Argument	Type	Description
at		String!
height		Int!
width		Int!

Page

A publication page

Field	Argument	Type	Description
height		Int!
id		ID!
images		[Image!]
position		Int!
text		String
width		Int!

PageInfo

Information about pagination in a connection.

Field	Type	Description
endCursor	String	When paginating forwards, the cursor to continue.
hasNextPage	Boolean!	When paginating forwards, are there more items?
hasPreviousPage	Boolean!	When paginating backwards, are there more items?
startCursor	String	When paginating backwards, the cursor to continue.

PageReferenceHotspot

A hotspot with a reference to another page

Field	Argument	Type	Description
height		Float!
id		ID!
left		Float!
pageNumber		Int
tabIndex		Int
top		Float!
width		Float!
zIndex		Int

PhotoUrl

Photo data with thumb and full URLs

Field	Argument	Type	Description
full		String
thumb		String

Product

A product from a hotspot

Field	Argument	Type	Description
availability		String
brand		String
customLabel0		String
customLabel1		String
customLabel2		String
customLabel3		String
customLabel4		String
description		String
discountedPrice		Float
gtin		String
id		ID!
itemGroupId		String
mpn		String
photoUrls		[PhotoUrl!]
position		Int
price		Float
productType		String
title		String
videoId		String
videoProvider		String
webshopIdentifier		String
webshopUrl		String

ProductHotspot

A hotspot containing products

Field	Argument	Type	Description
dynamic		Boolean
height		Float!
id		ID!
left		Float!
products		[Product!]
tabIndex		Int
top		Float!
width		Float!
zIndex		Int

Publication

Field	Type	Description
currency	String
customCurrency	String
description	String
downloadPdfUrl	String
groupSlug	String!
id	ID!
language	String
layout	String!
offlineAt	ISO8601DateTime
onlineAt	ISO8601DateTime
scheduleOfflineAt	ISO8601DateTime
scheduleOnlineAt	ISO8601DateTime
sizes	[ImageSize!]
slug	String!
spreads	SpreadConnection
after	String	Returns the elements in the list that come after the specified cursor.
before	String	Returns the elements in the list that come before the specified cursor.
first	Int	Returns the first _n_ elements from the list.
last	Int	Returns the last _n_ elements from the list.
title	String!
validFrom	ISO8601Date

SlideshowHotspot

A hotspot with a slideshow of images

Field	Argument	Type	Description
autoplay		Boolean
backgroundColor		String
height		Float!
id		ID!
left		Float!
slideshowItems		[SlideshowItem!]
tabIndex		Int
top		Float!
width		Float!
zIndex		Int

SlideshowItem

A slideshow item from a slideshow hotspot

Field	Argument	Type	Description
url		String!

Spread

Field	Argument	Type	Description
hotspots		[Hotspot!]
types		[HotspotCategory!]
id		ID!
pages		[Page!]
position		Int!
publicationId		ID!

SpreadConnection

The connection type for Spread.

Field	Type	Description
edges	[SpreadEdge]	A list of edges.
nodes	[Spread]	A list of nodes.
pageInfo	PageInfo!	Information to aid in pagination.

SpreadEdge

An edge in a connection.

Field	Argument	Type	Description
cursor		String!	A cursor for use in pagination.
node		Spread	The item at the end of the edge.

VideoHotspot

A hotspot with an embedded video

Field	Argument	Type	Description
height		Float!
id		ID!
left		Float!
tabIndex		Int
top		Float!
videoAutoplay		Boolean
videoId		String
videoLoop		Boolean
videoOverlayContent		Boolean
videoProvider		String
videoShowAccessibilityControls		Boolean
videoShowPreview		Boolean
videoType		String
videoUrl		String
width		Float!
zIndex		Int

Enums

HotspotCategory

Value	Description
PRODUCT
EXTERNAL_LINK
PAGE_REFERENCE
VIDEO
IMAGE
SLIDESHOW

Scalars

Boolean

Represents true or false values.

Float

Represents signed double-precision fractional values as specified by IEEE 754.

ID

Represents a unique identifier that is Base64 obfuscated. It is often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as "VXNlci0xMA==") or integer (such as 4) input value will be accepted as an ID.

ISO8601Date

An ISO 8601-encoded date

ISO8601DateTime

An ISO 8601-encoded datetime

Int

Represents non-fractional signed whole numeric values. Int can represent values between -(2^31) and 2^31 - 1.

String

Represents textual data as UTF-8 character sequences. This type is most often used by GraphQL to represent free-form human-readable text.

Interfaces

Hotspot

A hotspot that may be of several types

Field	Argument	Type	Description
height		Float!
id		ID!
left		Float!
tabIndex		Int
top		Float!
width		Float!
zIndex		Int

Possible Types: ExternalLinkHotspot, ImageHotspot, PageReferenceHotspot, ProductHotspot, SlideshowHotspot, VideoHotspot