@financial-times/cp-content-pipeline-client 0.2.8 → 0.3.0

package/CHANGELOG.md

@@ -18,6 +18,26 @@
   * devDependencies
     * @financial-times/cp-content-pipeline-schema bumped from ^0.3.3 to ^0.3.4
 
+## [0.3.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-client-v0.2.8...cp-content-pipeline-client-v0.3.0) (2022-11-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* This will change the output of concept types that are already in use. For example within teasers
+
+### Features
+
+* return all concept properties ([34e26db](https://github.com/Financial-Times/cp-content-pipeline/commit/34e26dbc9c6164eb23a9e278f2b2298c1b3bec8b))
+* return annotations as part of the article query ([151d59c](https://github.com/Financial-Times/cp-content-pipeline/commit/151d59c5b27cd062a467eca77941a1612ba2320a))
+* return only the uuid for concept ID properties ([7eea0a0](https://github.com/Financial-Times/cp-content-pipeline/commit/7eea0a00c67a92b52fbb5cdf2cc572f0642f3c89))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-schema bumped from ^0.3.5 to ^0.4.0
+
 ## [0.2.8](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-client-v0.2.7...cp-content-pipeline-client-v0.2.8) (2022-11-01)
 
 

package/README.md

@@ -2,6 +2,8 @@
 
 Provides a JS client for querying the GraphQL API, with a pre-defined query for a complete article, along with type definitions to use in components.
 
+The published `cp-content-pipeline-client` package mainly consists of generated code. To understand more about how this package is produced read the ["How this package is produced"](#how-this-package-is-produced) section below
+
 ## Getting Started
 
 Run `npm install` then `npm start` from [the monorepo project root](../../README.md#commands).
@@ -23,3 +25,104 @@ const { content: articleData } = await client.Article({
   useVanities: true,
 })
 ```
+
+## How this package is produced
+
+The published `cp-content-pipeline-client` package mainly consists of generated code which is the output of [@graphql-codegen](https://www.npmjs.com/package/@graphql-codegen/cli). 
+
+
+### What is used to generate the GraphQL client
+
+The generated GraphQL client is produced using the output of the `cp-content-pipeline-schema` package, along with the hand-written queries within the `./queries` directory of the client package.
+
+### What is used to generate the TypeScript type definitions
+
+The `cp-content-pipeline-client` also exposes TypeScript type definitions. These type definitions are generated using the GraphQL typeDef's for article features within the `cp-content-pipeline-schema` package.
+
+### Code generation diagram
+
+This diagram visualises how these parts piece together to produce the published `cp-content-pipeline-client`:
+
+```mermaid
+flowchart TB
+
+subgraph cpContentPipelineSchema[cp-content-pipeline-schema]
+    subgraph articleFeatures[Article features]
+        id1[Schema, Resolvers & Typedefs for each article feature <br> Article features are things like toppers, teasters, links, pullquotes, etc]:::description
+    end
+    articleFeatures:::internalComponent
+end
+cpContentPipelineSchema:::internalContainer
+
+subgraph cpContentPipelineClient[cp-content-pipeline-client]
+    subgraph codegenConfig[Codegen config]
+        id2[A  codegen config file]:::description
+    end
+    codegenConfig:::internalComponent
+    subgraph articleQuery[Article GraphQL Query]
+        id3[A  article.graphql file is a hand crafted query for a complete article]:::description
+    end
+    articleQuery:::internalComponent
+
+
+    subgraph toolkitPlugin[Codegen Toolkit Plugin]
+        id4[A toolkit plugin wrapper around graphql-codegen.<br>Triggered by commands such as npm start]:::description
+        subgraph codegenPackage[graphql-codegen package]
+            id5[A third party package that takes GraphQL schemas to produce a variety of outputs]:::description
+        end
+        codegenPackage:::externalSystem
+        
+    end
+    toolkitPlugin:::internalComponent
+
+
+    subgraph generatedOuput[Generate Output]
+        id6[The generated output of the codegen toolkit plugin<br>The generated output is what gets used when the package is published]:::description
+        subgraph graphqlClient[GraphQL Client]
+            id7[A client for querying the GraphQL API]:::description
+        end
+        graphqlClient:::internalComponent
+        subgraph tsTypes[Typescript Types]
+            id8[TypeScript types generated from the GraphQL schema]:::description
+        end
+        tsTypes:::internalComponent
+    end
+    generatedOuput:::internalGrouping
+end
+cpContentPipelineClient:::internalContainer
+
+subgraph key[Key]
+    subgraph keyPackage[cp-content-pipeline package]
+        id9[A package from the cp-content-pipeline monorepo]:::description
+    end
+    keyPackage:::internalContainer
+
+    subgraph keyComponent[Package Component]
+        id10[A component within a  cp-content-pipeline package]:::description
+    end
+    keyComponent:::internalComponent
+
+    subgraph keyExternal[External Component]
+        id11[An external package/component/dependency]:::description
+    end
+    keyExternal:::externalSystem
+end
+key:::keyContainer
+
+codegenConfig-->codegenPackage
+articleQuery--Codegen uses the article query to generate the client-->codegenPackage
+codegenPackage--Produces the API client-->graphqlClient
+codegenPackage--Produces the TypeScript types---->tsTypes
+articleFeatures--Codegen uses the Schema package to generate the client <br> The typedefs are also used to generate TypeScript Types-->codegenPackage
+
+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, 
+
+style generatedOuput stroke-dasharray: 5 5
+
+```
+