A JavaScript client for querying the GraphQL API.
It exports:
- The generated TypeScript type definitions for
cp-content-pipeline-ui, which are the output of @graphql-codegen ontypeDefsdefined incp-content-pipeline-schema. - A pre-defined query for a complete article written in
cp-content-pipeline-schema.
To run the client, see Quick Start.
import initContentPipelineClient from '@financial-times/cp-content-pipeline-client'
import { Body } from '@financial-times/cp-content-pipeline-ui'
// initialise the content pipeline client
const client = initContentPipelineClient({
apiKey: 'some-secret',
systemCode: 'app-name',
})You can either query the client by using the main .Article method:
// query the client instance, passing in a `uuid` parameter
const { content } = await client.Article({
uuid: 'a70c927-ff16-4977-942f-897cfd1349af',
})Or by using the .ArticleCannedQuery method, which uses the canned query GET endpoint:
// query the client instance, passing in a `uuid` parameter
const { content } = await client.ArticleCannedQuery({
uuid: 'a70c927-ff16-4977-942f-897cfd1349af',
})// render JSX component with the fetched content
const ArticleBody = () => {
return (
...
<Body content={content} />
)
}The client requests versions of the API based on the version of the schema it has installed as a dependency. For example, a client that depends on
@financial-times/cp-content-pipeline-schema: "2.0.x"
will send requests to https://www.ft.com/__content/v2.
When we release a new major version of the schema, we'll release a new major version of the client alongside it, so consuming apps can install the new version of the client to get the breaking schema changes, and consumers still depending on the old client version will get the old schema.
The baseUrl option overrides this logic:
const client = initContentPipelineClient({
apiKey: 'some-secret',
systemCode: 'app-name'
baseUrl: 'https://ft.com/__content/v3'
});It forces all requests to go to that URL. If the version is not included, it will default to the latest schema version.
This means if you're overriding baseUrl, you're opting out of having the client handle versioning for you. For this reason, baseUrl should only be used for testing purposes, e.g. to force the client to send requests to a locally-running API.
This diagram visualises how various parts piece together to produce the published cp-content-pipeline-client:
flowchart TB
subgraph cpContentPipelineSchema[cp-content-pipeline-schema]
subgraph typeDefs[typeDefs, resolvers, articleDocumentQuery]
end
typeDefs:::internalComponent
end
subgraph cpContentPipelineClient[cp-content-pipeline-client]
subgraph toolkitPlugin[Codegen Toolkit Plugin]
subgraph codegenPackage[graphql-codegen third party package]
end
codegenPackage:::externalSystem
end
toolkitPlugin:::internalComponent
subgraph generatedOuput[Generated Output]
id0[Published exports]:::description
subgraph graphqlClient[GraphQL Client]
end
graphqlClient:::internalComponent
subgraph tsTypes[Typescript Types]
end
tsTypes:::internalComponent
end
generatedOuput:::internalGrouping
end
class cpContentPipelineSchema cpContentPipelineSchema
codegenPackage--Outputs-->graphqlClient
codegenPackage--Outputs---->tsTypes
cpContentPipelineSchema-->toolkitPlugin
classDef internalContainer fill:#D4DFE8,stroke-width:0px
classDef internalComponent fill:#BDA8FA,stroke-width:0px
classDef internalGrouping stroke-width:2px,fill:none,stroke:black
classDef externalSystem fill:#03A696,stroke-width:1px,stroke:black
classDef description stroke-width:0px,color:#000,fill:transparent,font-size:13px
classDef keyContainer fill: transparent, stroke: black
%% Styling
classDef cpContentPipelineClient margin-right:10.5cm
class cpContentPipelineClient cpContentPipelineClient
classDef cpContentPipelineSchema margin-right:3.5cm
classDef generatedOuput margin-right:8.7cm
class generatedOuput generatedOuput
style generatedOuput stroke-dasharray: 5 5