@financial-times/cp-content-pipeline-schema 3.4.0 → 3.5.1

package/src/generated/index.ts

@@ -513,6 +513,20 @@ export type ContentUrlArgs = {
   vanity?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
+export type ContentConnection = {
+  /** A list of edges for the connection. */
+  readonly edges: ReadonlyArray<Maybe<ContentEdge>>;
+  /** Pagination data for the connection. */
+  readonly pageInfo: PageInfo;
+};
+
+export type ContentEdge = {
+  /** The opaque cursor for this edge that can be used for future requests. */
+  readonly cursor: Scalars['String']['output'];
+  /** The child article of this edge. */
+  readonly node?: Maybe<Content>;
+};
+
 export type ContentPackage = Content & {
   /** A scalar representing the access level of the article, eg. 'free'. */
   readonly accessLevel?: Maybe<Scalars['AccessLevel']['output']>;
@@ -680,20 +694,11 @@ export type Design = {
 
 export type Flourish = Reference & {
   /** The fallback image to be used if the flourish graphics cannot be loaded. */
-  readonly fallbackImage?: Maybe<FlourishFallback>;
+  readonly fallbackImage?: Maybe<FlourishSource>;
   /** The type of the reference, eg. 'flourish'. */
   readonly type: Scalars['String']['output'];
 };
 
-export type FlourishFallback = {
-  /** The height in pixels of the fallback image. */
-  readonly height?: Maybe<Scalars['Int']['output']>;
-  /** The url of the fallback image. */
-  readonly url?: Maybe<Scalars['String']['output']>;
-  /** The width in pixels of the fallback image. */
-  readonly width?: Maybe<Scalars['Int']['output']>;
-};
-
 export type FlourishSource = {
   /** The format of the source, eg. 'standard'. */
   readonly format: Scalars['ImageFormat']['output'];
@@ -1061,7 +1066,7 @@ export type LayoutImage = Reference & {
 export type LeadFlourish = {
   /** The description of the Flourish chart. */
   readonly description?: Maybe<Scalars['String']['output']>;
-  readonly fallbackImage: FlourishSource;
+  readonly fallbackImage?: Maybe<FlourishSource>;
   /** The id of the Flourish chart. */
   readonly id?: Maybe<Scalars['String']['output']>;
   /** The type of the chart, eg. 'visualisation'. */
@@ -1120,6 +1125,8 @@ export type LiveBlogPackage = Content & {
   readonly instantAlertConcept?: Maybe<Concept>;
   /** The child articles of this live blog package. */
   readonly liveBlogPosts?: Maybe<ReadonlyArray<Maybe<Content>>>;
+  /** The child articles of this live blog package following the [Connections](https://relay.dev/graphql/connections.htm) spec. */
+  readonly liveBlogPostsConnection?: Maybe<ContentConnection>;
   /** An image object containing the url and the caption, to be displayed usually before the article content. */
   readonly mainImage?: Maybe<Image>;
   /** The number of milliseconds since the unix epoch the article was last changed, eg '1712140552443'. */
@@ -1161,6 +1168,19 @@ export type LiveBlogPackageBylineArgs = {
 };
 
 
+export type LiveBlogPackageLiveBlogPostsArgs = {
+  count?: InputMaybe<Scalars['Int']['input']>;
+};
+
+
+export type LiveBlogPackageLiveBlogPostsConnectionArgs = {
+  after?: InputMaybe<Scalars['String']['input']>;
+  before?: InputMaybe<Scalars['String']['input']>;
+  first?: InputMaybe<Scalars['Int']['input']>;
+  last?: InputMaybe<Scalars['Int']['input']>;
+};
+
+
 export type LiveBlogPackageUrlArgs = {
   relative?: InputMaybe<Scalars['Boolean']['input']>;
   vanity?: InputMaybe<Scalars['Boolean']['input']>;
@@ -1312,6 +1332,17 @@ export type OpinionTopperHeadshotArgs = {
   width?: InputMaybe<Scalars['Int']['input']>;
 };
 
+export type PageInfo = {
+  /** The cursor for the last edge. */
+  readonly endCursor?: Maybe<Scalars['String']['output']>;
+  /** Whether a subsequent page of edges is available on request. */
+  readonly hasNextPage: Scalars['Boolean']['output'];
+  /** Whether a previous page of edges is available on request. */
+  readonly hasPreviousPage: Scalars['Boolean']['output'];
+  /** The cursor for the first edge. */
+  readonly startCursor?: Maybe<Scalars['String']['output']>;
+};
+
 export type PartnerContentTopper = Topper & TopperWithImages & TopperWithTheme & {
   /** Whether the topper should have a background box. */
   readonly backgroundBox?: Maybe<Scalars['Boolean']['output']>;
@@ -1976,6 +2007,8 @@ export type ResolversTypes = ResolversObject<{
   Concept: ResolverTypeWrapper<ConceptModel>;
   ConceptInterface: ResolverTypeWrapper<ConceptModel>;
   Content: ResolverTypeWrapper<ResolversInterfaceTypes<ResolversTypes>['Content']>;
+  ContentConnection: ResolverTypeWrapper<Omit<ContentConnection, 'edges'> & { edges: ReadonlyArray<Maybe<ResolversTypes['ContentEdge']>> }>;
+  ContentEdge: ResolverTypeWrapper<Omit<ContentEdge, 'node'> & { node: Maybe<ResolversTypes['Content']> }>;
   ContentPackage: ResolverTypeWrapper<CapiResponse>;
   ContentType: ResolverTypeWrapper<Scalars['ContentType']['output']>;
   CustomCodeComponent: ResolverTypeWrapper<ReferenceWithCAPIData<ContentTree.CustomCodeComponent>>;
@@ -1984,7 +2017,6 @@ export type ResolversTypes = ResolversObject<{
   Design: ResolverTypeWrapper<Design>;
   Float: ResolverTypeWrapper<Scalars['Float']['output']>;
   Flourish: ResolverTypeWrapper<ReferenceWithCAPIData<ContentTree.Flourish>>;
-  FlourishFallback: ResolverTypeWrapper<FlourishFallback>;
   FlourishSource: ResolverTypeWrapper<FlourishSourceModel>;
   FollowButtonVariant: ResolverTypeWrapper<Scalars['FollowButtonVariant']['output']>;
   FullBleedTopper: ResolverTypeWrapper<TopperModel>;
@@ -2019,6 +2051,7 @@ export type ResolversTypes = ResolversObject<{
   Mutation: ResolverTypeWrapper<{}>;
   OpinionTopper: ResolverTypeWrapper<TopperModel>;
   PackageDesign: ResolverTypeWrapper<Scalars['PackageDesign']['output']>;
+  PageInfo: ResolverTypeWrapper<PageInfo>;
   PartnerContentTopper: ResolverTypeWrapper<TopperModel>;
   Person: ResolverTypeWrapper<PersonModel>;
   Picture: ResolverTypeWrapper<PictureModel>;
@@ -2075,6 +2108,8 @@ export type ResolversParentTypes = ResolversObject<{
   Concept: ConceptModel;
   ConceptInterface: ConceptModel;
   Content: ResolversInterfaceTypes<ResolversParentTypes>['Content'];
+  ContentConnection: Omit<ContentConnection, 'edges'> & { edges: ReadonlyArray<Maybe<ResolversParentTypes['ContentEdge']>> };
+  ContentEdge: Omit<ContentEdge, 'node'> & { node: Maybe<ResolversParentTypes['Content']> };
   ContentPackage: CapiResponse;
   ContentType: Scalars['ContentType']['output'];
   CustomCodeComponent: ReferenceWithCAPIData<ContentTree.CustomCodeComponent>;
@@ -2083,7 +2118,6 @@ export type ResolversParentTypes = ResolversObject<{
   Design: Design;
   Float: Scalars['Float']['output'];
   Flourish: ReferenceWithCAPIData<ContentTree.Flourish>;
-  FlourishFallback: FlourishFallback;
   FlourishSource: FlourishSourceModel;
   FollowButtonVariant: Scalars['FollowButtonVariant']['output'];
   FullBleedTopper: TopperModel;
@@ -2118,6 +2152,7 @@ export type ResolversParentTypes = ResolversObject<{
   Mutation: {};
   OpinionTopper: TopperModel;
   PackageDesign: Scalars['PackageDesign']['output'];
+  PageInfo: PageInfo;
   PartnerContentTopper: TopperModel;
   Person: PersonModel;
   Picture: PictureModel;
@@ -2396,6 +2431,18 @@ export type ContentResolvers<ContextType = QueryContext, ParentType extends Reso
   url: Resolver<ResolversTypes['String'], ParentType, ContextType, Partial<ContentUrlArgs>>;
 }>;
 
+export type ContentConnectionResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['ContentConnection'] = ResolversParentTypes['ContentConnection']> = ResolversObject<{
+  edges: Resolver<ReadonlyArray<Maybe<ResolversTypes['ContentEdge']>>, ParentType, ContextType>;
+  pageInfo: Resolver<ResolversTypes['PageInfo'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+}>;
+
+export type ContentEdgeResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['ContentEdge'] = ResolversParentTypes['ContentEdge']> = ResolversObject<{
+  cursor: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  node: Resolver<Maybe<ResolversTypes['Content']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+}>;
+
 export type ContentPackageResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['ContentPackage'] = ResolversParentTypes['ContentPackage']> = ResolversObject<{
   accessLevel: Resolver<Maybe<ResolversTypes['AccessLevel']>, ParentType, ContextType>;
   altStandfirst: Resolver<Maybe<ResolversTypes['AltStandfirst']>, ParentType, ContextType>;
@@ -2485,18 +2532,11 @@ export type DesignResolvers<ContextType = QueryContext, ParentType extends Resol
 }>;
 
 export type FlourishResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['Flourish'] = ResolversParentTypes['Flourish']> = ResolversObject<{
-  fallbackImage: Resolver<Maybe<ResolversTypes['FlourishFallback']>, ParentType, ContextType>;
+  fallbackImage: Resolver<Maybe<ResolversTypes['FlourishSource']>, ParentType, ContextType>;
   type: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 }>;
 
-export type FlourishFallbackResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['FlourishFallback'] = ResolversParentTypes['FlourishFallback']> = ResolversObject<{
-  height: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
-  url: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
-  width: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
-  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
-}>;
-
 export type FlourishSourceResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['FlourishSource'] = ResolversParentTypes['FlourishSource']> = ResolversObject<{
   format: Resolver<ResolversTypes['ImageFormat'], ParentType, ContextType>;
   height: Resolver<ResolversTypes['Int'], ParentType, ContextType>;
@@ -2711,7 +2751,7 @@ export type LayoutImageResolvers<ContextType = QueryContext, ParentType extends
 
 export type LeadFlourishResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['LeadFlourish'] = ResolversParentTypes['LeadFlourish']> = ResolversObject<{
   description: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
-  fallbackImage: Resolver<ResolversTypes['FlourishSource'], ParentType, ContextType>;
+  fallbackImage: Resolver<Maybe<ResolversTypes['FlourishSource']>, ParentType, ContextType>;
   id: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   type: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
@@ -2749,7 +2789,8 @@ export type LiveBlogPackageResolvers<ContextType = QueryContext, ParentType exte
   firstPublishedDate: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   id: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
   instantAlertConcept: Resolver<Maybe<ResolversTypes['Concept']>, ParentType, ContextType>;
-  liveBlogPosts: Resolver<Maybe<ReadonlyArray<Maybe<ResolversTypes['Content']>>>, ParentType, ContextType>;
+  liveBlogPosts: Resolver<Maybe<ReadonlyArray<Maybe<ResolversTypes['Content']>>>, ParentType, ContextType, Partial<LiveBlogPackageLiveBlogPostsArgs>>;
+  liveBlogPostsConnection: Resolver<Maybe<ResolversTypes['ContentConnection']>, ParentType, ContextType, Partial<LiveBlogPackageLiveBlogPostsConnectionArgs>>;
   mainImage: Resolver<Maybe<ResolversTypes['Image']>, ParentType, ContextType>;
   modifiedTimestamp: Resolver<Maybe<ResolversTypes['Float']>, ParentType, ContextType>;
   originatingParty: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
@@ -2843,6 +2884,14 @@ export interface PackageDesignScalarConfig extends GraphQLScalarTypeConfig<Resol
   name: 'PackageDesign';
 }
 
+export type PageInfoResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['PageInfo'] = ResolversParentTypes['PageInfo']> = ResolversObject<{
+  endCursor: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  hasNextPage: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
+  hasPreviousPage: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
+  startCursor: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+}>;
+
 export type PartnerContentTopperResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['PartnerContentTopper'] = ResolversParentTypes['PartnerContentTopper']> = ResolversObject<{
   backgroundBox: Resolver<Maybe<ResolversTypes['Boolean']>, ParentType, ContextType>;
   backgroundColour: Resolver<Maybe<ResolversTypes['TopperBackgroundColour']>, ParentType, ContextType>;
@@ -3183,6 +3232,8 @@ export type Resolvers<ContextType = QueryContext> = ResolversObject<{
   Concept: ConceptResolvers<ContextType>;
   ConceptInterface: ConceptInterfaceResolvers<ContextType>;
   Content: ContentResolvers<ContextType>;
+  ContentConnection: ContentConnectionResolvers<ContextType>;
+  ContentEdge: ContentEdgeResolvers<ContextType>;
   ContentPackage: ContentPackageResolvers<ContextType>;
   ContentType: GraphQLScalarType;
   CustomCodeComponent: CustomCodeComponentResolvers<ContextType>;
@@ -3190,7 +3241,6 @@ export type Resolvers<ContextType = QueryContext> = ResolversObject<{
   DeepPortraitTopper: DeepPortraitTopperResolvers<ContextType>;
   Design: DesignResolvers<ContextType>;
   Flourish: FlourishResolvers<ContextType>;
-  FlourishFallback: FlourishFallbackResolvers<ContextType>;
   FlourishSource: FlourishSourceResolvers<ContextType>;
   FollowButtonVariant: GraphQLScalarType;
   FullBleedTopper: FullBleedTopperResolvers<ContextType>;
@@ -3223,6 +3273,7 @@ export type Resolvers<ContextType = QueryContext> = ResolversObject<{
   Mutation: MutationResolvers<ContextType>;
   OpinionTopper: OpinionTopperResolvers<ContextType>;
   PackageDesign: GraphQLScalarType;
+  PageInfo: PageInfoResolvers<ContextType>;
   PartnerContentTopper: PartnerContentTopperResolvers<ContextType>;
   Person: PersonResolvers<ContextType>;
   Picture: PictureResolvers<ContextType>;

package/src/index.ts

@@ -26,6 +26,7 @@ export interface QueryContext {
   systemCode?: string
   requestId?: string
   contentRequestedOnce?: boolean
+  contentTimedOut?: boolean
   logger: Logger
   versions: {
     api: string

package/src/model/CapiResponse.test.ts

@@ -2,7 +2,6 @@ import { CapiResponse } from './CapiResponse'
 import { baseCapiObject } from '../fixtures/capiObject'
 import cloneDeep from 'clone-deep'
 import context from '../fixtures/dummyContext'
-import TimeoutError from '../helpers/timeout-error'
 
 describe('CAPI response', () => {
   describe('Content ID', () => {
@@ -70,7 +69,7 @@ describe('CAPI response', () => {
   })
 
   describe('liveBlogPosts', () => {
-    test('returns a resolved array of the articles contained sorted by most recently published', async () => {
+    test('returns a resolved array of the articles contained', async () => {
       const liveBlogPackage = cloneDeep({
         ...baseCapiObject,
         type: 'http://www.ft.com/ontology/content/LiveBlogPackage',
@@ -81,14 +80,14 @@ describe('CAPI response', () => {
               'http://api.ft.com/content/000000000-0000-0000-0000-000000000000',
           },
           {
-            id: 'http://api.ft.com/things/000000000-0000-0000-0000-000000000002',
+            id: 'http://api.ft.com/things/000000000-0000-0000-0000-000000000001',
             apiUrl:
-              'http://api.ft.com/content/000000000-0000-0000-0000-000000000002',
+              'http://api.ft.com/content/000000000-0000-0000-0000-000000000001',
           },
           {
-            id: 'http://api.ft.com/things/000000000-0000-0000-0000-000000000001',
+            id: 'http://api.ft.com/things/000000000-0000-0000-0000-000000000002',
             apiUrl:
-              'http://api.ft.com/content/000000000-0000-0000-0000-000000000001',
+              'http://api.ft.com/content/000000000-0000-0000-0000-000000000002',
           },
         ],
       })
@@ -107,6 +106,137 @@ describe('CAPI response', () => {
     })
   })
 
+  describe('liveBlogPostsConnection', () => {
+    const generateId = (i: number) =>
+      '00000000-0000-0000-0000-0000000000' + String(i).padStart(2, '0')
+
+    const postCount = 100
+    const liveBlogPackage = cloneDeep({
+      ...baseCapiObject,
+      type: 'http://www.ft.com/ontology/content/LiveBlogPackage',
+      contains: [...Array(postCount).keys()].map((i) => {
+        const id = generateId(postCount - 1 - i)
+        return {
+          id: 'http://api.ft.com/things/' + id,
+          apiUrl: 'http://api.ft.com/content/' + id,
+        }
+      }),
+    })
+    const capiResponse = new CapiResponse(liveBlogPackage, context)
+
+    test('returns all posts when no argument specified', async () => {
+      const liveBlogPostsConnection =
+        await capiResponse.liveBlogPostsConnection({})
+      expect(liveBlogPostsConnection.edges).toHaveLength(postCount)
+      liveBlogPostsConnection.edges.forEach((edge, i) =>
+        expect(edge.node.id()).toEqual(generateId(i))
+      )
+      expect(liveBlogPostsConnection.pageInfo).toEqual(
+        expect.objectContaining({
+          hasPreviousPage: false,
+          hasNextPage: false,
+        })
+      )
+    })
+
+    test('returns first x edges', async () => {
+      const firstCount = 20
+      const liveBlogPostsConnection =
+        await capiResponse.liveBlogPostsConnection({ first: firstCount })
+      expect(liveBlogPostsConnection.edges).toHaveLength(firstCount)
+      liveBlogPostsConnection.edges.forEach((edge, i) =>
+        expect(edge.node.id()).toEqual(generateId(i))
+      )
+      expect(liveBlogPostsConnection.pageInfo).toEqual(
+        expect.objectContaining({
+          hasPreviousPage: false,
+          hasNextPage: true,
+        })
+      )
+    })
+
+    test('returns last x edges', async () => {
+      const lastCount = 20
+      const liveBlogPostsConnection =
+        await capiResponse.liveBlogPostsConnection({ last: lastCount })
+      expect(liveBlogPostsConnection.edges).toHaveLength(lastCount)
+      liveBlogPostsConnection.edges.forEach((edge, i) =>
+        expect(edge.node.id()).toEqual(generateId(i + (postCount - lastCount)))
+      )
+      expect(liveBlogPostsConnection.pageInfo).toEqual(
+        expect.objectContaining({
+          hasPreviousPage: true,
+          hasNextPage: false,
+        })
+      )
+    })
+
+    test('returns edges after cursor', async () => {
+      const firstCount = 20
+      const startingLiveBlogPostsConnection =
+        await capiResponse.liveBlogPostsConnection({ first: firstCount })
+      const cursor = startingLiveBlogPostsConnection.pageInfo.endCursor
+      expect(cursor).toBeDefined()
+
+      const liveBlogPostsConnection =
+        await capiResponse.liveBlogPostsConnection({
+          first: firstCount,
+          after: cursor,
+        })
+      expect(liveBlogPostsConnection.edges).toHaveLength(firstCount)
+      liveBlogPostsConnection.edges.forEach((edge, i) =>
+        expect(edge.node.id()).toEqual(generateId(i + firstCount))
+      )
+      expect(liveBlogPostsConnection.pageInfo).toEqual(
+        expect.objectContaining({
+          hasPreviousPage: true,
+          hasNextPage: true,
+        })
+      )
+    })
+
+    test('returns edges before cursor', async () => {
+      const lastCount = 20
+      const endingLiveBlogPostsConnection =
+        await capiResponse.liveBlogPostsConnection({ last: lastCount })
+      const cursor = endingLiveBlogPostsConnection.pageInfo.startCursor
+      expect(cursor).toBeDefined()
+
+      const liveBlogPostsConnection =
+        await capiResponse.liveBlogPostsConnection({
+          last: lastCount,
+          before: cursor,
+        })
+      expect(liveBlogPostsConnection.edges).toHaveLength(lastCount)
+      liveBlogPostsConnection.edges.forEach((edge, i) =>
+        expect(edge.node.id()).toEqual(
+          generateId(i + (postCount - lastCount * 2))
+        )
+      )
+      expect(liveBlogPostsConnection.pageInfo).toEqual(
+        expect.objectContaining({
+          hasPreviousPage: true,
+          hasNextPage: true,
+        })
+      )
+    })
+
+    test('returns all edges when first is greater than total posts', async () => {
+      const liveBlogPostsConnection =
+        await capiResponse.liveBlogPostsConnection({ first: postCount + 1 })
+      expect(liveBlogPostsConnection.edges).toHaveLength(postCount)
+      liveBlogPostsConnection.edges.forEach((edge, i) =>
+        expect(edge.node.id()).toEqual(generateId(i))
+      )
+      expect(liveBlogPostsConnection.pageInfo).toEqual(
+        expect.objectContaining({
+          hasPreviousPage: false,
+          hasNextPage: false,
+        })
+      )
+    })
+  })
+
   describe('Partner content type articles', () => {
     test('should have `isPartnerContent` set correctly as `true` when correct publication id is set', () => {
       const article = cloneDeep({
@@ -137,7 +267,7 @@ describe('CAPI response', () => {
 
       const timingOutContext = cloneDeep(context)
       timingOutContext.dataSources.capi.getPerson = () =>
-        Promise.reject(new TimeoutError(0))
+        Promise.reject(new DOMException(undefined, 'TimeoutError'))
       const capiResponse = new CapiResponse(article, timingOutContext)
 
       const authors = await capiResponse.authors()

package/src/model/CapiResponse.ts

@@ -4,6 +4,7 @@ import type {
   MainImage,
   ClipSet,
   CustomCodeComponentReference,
+  LiveBlogPackage,
 } from './schemas/capi/internal-content'
 import conceptIds from '@financial-times/n-concept-ids'
 import metadata from '@financial-times/n-display-metadata'
@@ -34,6 +35,7 @@ import {
   ContentAnnotationsArgs,
   ContentPackageContainsArgs,
   ContentUrlArgs,
+  LiveBlogPackageLiveBlogPostsArgs,
   Media,
   TableOfContents,
 } from '../generated'
@@ -42,6 +44,7 @@ import { z } from 'zod'
 import { Byline } from './Byline'
 import { RichText } from './RichText'
 import flattenFormattedZodIssues from '../helpers/flatten-formatted-zod-errors'
+import { Connection, ConnectionArguments } from '../types/connection'
 
 type Design = {
   theme: LiteralUnionScalarValues<typeof PackageDesign>
@@ -708,21 +711,54 @@ export class CapiResponse {
     surroundingArticles,
     fromId,
   }: Partial<ContentPackageContainsArgs> = {}): Promise<CapiResponse[] | null> {
+    let edges
+    if (fromId && surroundingArticles) {
+      const afterId = await this.containsConnection({
+        after: fromId,
+        first: surroundingArticles,
+      })
+      const beforeAndIncludingId = await this.containsConnection({
+        before: afterId.pageInfo.startCursor,
+        last: surroundingArticles + 1,
+      })
+      edges = afterId.edges.concat(beforeAndIncludingId.edges)
+    } else {
+      const connection = await this.containsConnection()
+      edges = connection.edges
+    }
+    return edges.map((edge) => edge.node)
+  }
+
+  async containsConnection(
+    { before, after, first, last }: ConnectionArguments = {},
+    transformer?: (
+      contains: LiveBlogPackage['contains']
+    ) => LiveBlogPackage['contains']
+  ): Promise<Connection<CapiResponse>> {
     if ('contains' in this.capiData) {
-      const fromIndex = this.capiData.contains.findIndex(
-        (contains) => contains.id === `http://api.ft.com/things/${fromId}`
+      const { contains: containsUntransformed } = this.capiData
+      const contains = transformer
+        ? transformer(containsUntransformed)
+        : containsUntransformed
+
+      const beforeIndex = before
+        ? contains.findLastIndex(
+            (post) => post.id === `http://api.ft.com/things/${before}`
+          )
+        : -1
+      const afterIndex = after
+        ? contains.findIndex(
+            (post) => post.id === `http://api.ft.com/things/${after}`
+          )
+        : -1
+      const cursoredContains = contains.slice(
+        afterIndex >= 0 ? afterIndex + 1 : undefined,
+        beforeIndex >= 0 ? beforeIndex : undefined
       )
-
-      const contains =
-        fromId && surroundingArticles
-          ? this.capiData.contains.slice(
-              Math.max(0, fromIndex - surroundingArticles),
-              fromIndex + surroundingArticles
-            )
-          : this.capiData.contains
+      const slicedContains = cursoredContains.slice(-(last ?? 0), first)
 
       const results = await Promise.allSettled(
-        contains.map(({ id }) =>
+        slicedContains.map(({ id }) =>
           this.context.dataSources.capi.getContent(uuidFromUrl(id), this)
         )
       )
@@ -741,17 +777,49 @@ export class CapiResponse {
             cause: new AggregateError(failed.map((result) => result.reason)),
           }),
         })
+
+        if (
+          failed.some(
+            (result) =>
+              (result.reason as OperationalError).code === 'FETCH_TIMEOUT_ERROR'
+          )
+        ) {
+          this.context.contentTimedOut = true
+        }
       }
 
-      return results
+      const edges = results
         .filter(
           (result): result is PromiseFulfilledResult<CapiResponse> =>
             result.status === 'fulfilled'
         )
-        .map((result) => result.value)
+        .map((result) => {
+          const node = result.value
+          return { node, cursor: node.id() }
+        })
+
+      return {
+        edges,
+        pageInfo: {
+          hasPreviousPage: last
+            ? cursoredContains.length > last
+            : afterIndex > 0,
+          hasNextPage: first
+            ? cursoredContains.length > first
+            : beforeIndex > 0,
+          startCursor: edges[0]?.cursor,
+          endCursor: edges[edges.length - 1]?.cursor,
+        },
+      }
     }
 
-    return null
+    return {
+      edges: [],
+      pageInfo: {
+        hasPreviousPage: false,
+        hasNextPage: false,
+      },
+    }
   }
 
   containsLength() {
@@ -768,25 +836,37 @@ export class CapiResponse {
       : null
   }
 
-  async liveBlogPosts(): Promise<CapiResponse[] | []> {
-    const contains = await this.contains()
+  private handleLiveBlogPosts(liveBlogPosts: LiveBlogPackage['contains']) {
+    this.context.addSurrogateKeys(
+      liveBlogPosts.map((article) => ({
+        prefix: 'contentPipelineArticle',
+        id: article.id,
+      }))
+    )
 
-    if (contains && contains.length) {
-      this.context.addSurrogateKeys(
-        contains.map((article) => ({
-          prefix: 'contentPipelineArticle',
-          id: article.id(),
-        }))
-      )
+    return [...liveBlogPosts].reverse()
+  }
 
-      const liveBlogPosts = contains.sort(
-        (a, b) => b.publishedTimestamp() - a.publishedTimestamp()
-      )
+  async liveBlogPosts(
+    args?: LiveBlogPackageLiveBlogPostsArgs
+  ): Promise<CapiResponse[] | []> {
+    const containsConnections = await this.containsConnection(
+      {
+        first: args?.count ?? undefined,
+      },
+      this.handleLiveBlogPosts.bind(this)
+    )
+    const contains = containsConnections.edges.map((edge) => edge.node)
 
-      return liveBlogPosts
-    }
+    return contains.sort(
+      (a, b) => b.publishedTimestamp() - a.publishedTimestamp()
+    )
+  }
 
-    return []
+  async liveBlogPostsConnection(
+    args: ConnectionArguments
+  ): Promise<Connection<CapiResponse>> {
+    return this.containsConnection(args, this.handleLiveBlogPosts.bind(this))
   }
 
   isPinned() {
@@ -803,16 +883,28 @@ export class CapiResponse {
 
   async pinnedPost(): Promise<CapiResponse | null> {
     if ('pinnedPosts' in this.capiData) {
-      const pinnedPosts = this.capiData.pinnedPosts || []
-      const liveBlogPosts = await this.liveBlogPosts()
-
+      const pinnedPosts = this.capiData.pinnedPosts
       const pinnedPostId = pinnedPosts[0]
-      const pinnedPostIndex = liveBlogPosts.findIndex(
-        (post) => post.id() === pinnedPostId
-      )
+      if (!pinnedPostId) {
+        return null
+      }
 
-      if (pinnedPostIndex !== -1) {
-        return liveBlogPosts.splice(pinnedPostIndex, 1)[0] ?? null
+      try {
+        return await this.context.dataSources.capi.getContent(
+          uuidFromUrl(pinnedPostId),
+          this
+        )
+      } catch (error) {
+        if (isError(error)) {
+          this.context.logger.warn({
+            event: 'RECOVERABLE_ERROR',
+            error: new OperationalError({
+              code: 'PACKAGE_PINNED_POST_ERROR',
+              message: `Failed to fetch the pinned post ${pinnedPostId} contained in the package ${this.id()}`,
+              cause: error,
+            }),
+          })
+        }
       }
     }
     return null