Skip to content

Commit fc4f66a

Browse files
authored
chore(typescript-docs): update typescript docs (#1746)
- add documentation and usage examples - remove old sdk-client docs
1 parent 752fa6a commit fc4f66a

File tree

4 files changed

+248
-89
lines changed

4 files changed

+248
-89
lines changed

docs/sdk/api/typescriptSdk.md

Lines changed: 141 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,156 @@
1-
# `typescript`
1+
# TypeScript SDK Client v2
22

33
We provide a packages written in typescript for using our API
44

5-
#### Note:
5+
The **@commercetools/sdk-client-v2** is the TypeScript package that facilitates HTTP [requests](https://commercetools.github.io/nodejs/sdk/Glossary.html#clientrequest) to the Platform, ML or History API by using a predefined set of middlewares.
6+
7+
Unlike the Node.js sdk-client, the TypeScript client is a little different in its usage however, they are both very similar in every other aspect and it's also backward compatible with the Nodejs sdk-client.
68

7-
Please checkout the new [TypeScript Client](#typescript-sdk-client-v2) that is more updated and actively maintained and also consider migrating.
9+
## Issues and Contribution
10+
11+
Please feel free to open an [issue](https://github.com/commercetools/commercetools-sdk-typescript/issues) or even a [PR](https://github.com/commercetools/commercetools-sdk-typescript/pulls) in this repository if you come across any issue while using this SDK.
812

913
![example usage](typescript_tutorial.gif)
1014

1115
The source code for these packages are located in the [typescript](https://github.com/commercetools/commercetools-sdk-typescript/) repository.
1216

13-
## Install
17+
## Usage examples
18+
19+
### Browser environment
20+
21+
```html
22+
<script src="https://unpkg.com/@commercetools/[email protected]/dist/commercetools-sdk-client-v2.umd.js"></script>
23+
<script src="https://unpkg.com/@commercetools/[email protected]/dist/commercetools-platform-sdk.umd.js"></script>
24+
...
25+
```
26+
27+
```html
28+
<script>
29+
// global: @commercetools/sdk-client-v2
30+
// global: @commercetools/platform-sdk
31+
;(function () {
32+
// We can now access the sdk-client-v2 and platform-sdk object as:
33+
// const { ClientBuilder } = this['@commercetools/sdk-client-v2']
34+
// const { createApiBuilderFromCtpClient } = this['@commercetools/platform-sdk']
35+
// or
36+
// const { ClientBuilder } = window['@commercetools/sdk-client-v2']
37+
// const { createApiBuilderFromCtpClient } = window['@commercetools/platform-sdk']
38+
// ...
39+
})()
40+
</script>
41+
```
42+
43+
See full usage example [here](https://github.com/commercetools/commercetools-sdk-typescript/blob/master/examples/browser/browser.html)
1444

15-
#### Node.js
45+
### Node environment
1646

1747
```bash
1848
npm install --save @commercetools/platform-sdk
1949
npm install --save @commercetools/importapi-sdk
2050
npm install --save @commercetools/ml-sdk
51+
npm install --save @commercetools/sdk-client-v2
2152
```
2253

23-
#### Browser
54+
```ts
55+
const {
56+
ClientBuilder,
57+
createAuthForClientCredentialsFlow,
58+
createHttpClient,
59+
} = require('@commercetools/sdk-client-v2')
60+
const { createApiBuilderFromCtpClient } = require('@commercetools/platform-sdk')
61+
const fetch = require('node-fetch')
2462

25-
```html
26-
<script src="https://unpkg.com/@commercetools/platform-sdk/dist/platform-sdk.umd.js"></script>
27-
<script>
28-
// global: TypescriptSdk
29-
</script>
30-
```
63+
const projectKey = 'mc-project-key'
64+
const authMiddlewareOptions = {
65+
host: 'https://auth.europe-west1.gcp.commercetools.com',
66+
projectKey,
67+
credentials: {
68+
clientId: 'mc-client-id',
69+
clientSecret: 'mc-client-secrets',
70+
},
71+
oauthUri: '/oauth/token', // - optional custom oauthUri
72+
scopes: [`manage_project:${projectKey}`],
73+
fetch
74+
}
3175

32-
#### Usage example
76+
const httpMiddlewareOptions = {
77+
host: 'https://api.europe-west1.gcp.commercetools.com',
78+
fetch
79+
}
3380

34-
```typescript
35-
import { createAuthMiddlewareForClientCredentialsFlow } from '@commercetools/sdk-middleware-auth'
36-
import { createHttpMiddleware } from '@commercetools/sdk-middleware-http'
37-
import { createClient } from '@commercetools/sdk-client'
81+
const client = new ClientBuilder()
82+
.withProjectKey(projectKey)
83+
.withMiddleware(createAuthForClientCredentialsFlow(authMiddlewareOptions))
84+
.withMiddleware(createHttpClient(httpMiddlewareOptions))
85+
.withUserAgentMiddleware()
86+
.build()
87+
88+
// or
89+
const client = new ClientBuilder()
90+
.withProjectKey(projectKey)
91+
.withClientCredentialsFlow(authMiddlewareOptions)
92+
.withHttpMiddleware(httpMiddlewareOptions)
93+
.withUserAgentMiddleware()
94+
.build()
95+
96+
const apiRoot = createApiBuilderFromCtpClient(client)
97+
98+
// calling the platform functions
99+
// get project details
100+
apiRoot
101+
.withProjectKey({
102+
projectKey,
103+
})
104+
.get()
105+
.execute()
106+
.then((x) => {
107+
/*...*/
108+
})
109+
110+
// create a productType
111+
apiRoot
112+
.withProjectKey({ projectKey })
113+
.productTypes()
114+
.post({
115+
body: { name: 'product-type-name', description: 'some description' },
116+
})
117+
.execute()
118+
.then((x) => {
119+
/*...*/
120+
})
121+
122+
// create a product
123+
apiRoot
124+
.withProjectKey({ projectKey })
125+
.products()
126+
.post({
127+
body: {
128+
name: { en: 'our-great-product-name' },
129+
productType: {
130+
typeId: 'product-type',
131+
id: 'some-product-type-id',
132+
},
133+
slug: { en: 'some-slug' },
134+
},
135+
})
136+
.execute()
137+
.then((x) => {
138+
/*...*/
139+
})
140+
141+
// -----------------------------------------------------------------------
142+
// The sdk-client-v2 also have support for the old syntax
38143
import {
39-
createApiBuilderFromCtpClient,
40-
ApiRoot,
41-
} from '@commercetools/platform-sdk'
144+
createClient,
145+
createHttpClient,
146+
createAuthForClientCredentialsFlow,
147+
} from '@commercetools/sdk-client-v2'
148+
import { createApiBuilderFromCtpClient } from '@commercetools/platform-sdk'
42149
import fetch from 'node-fetch'
43150

44151
const projectKey = 'some_project_key'
45152

46-
const authMiddleware = createAuthMiddlewareForClientCredentialsFlow({
153+
const authMiddleware = createAuthForClientCredentialsFlow({
47154
host: 'https://auth.europe-west1.gcp.commercetools.com',
48155
projectKey,
49156
credentials: {
@@ -53,7 +160,7 @@ const authMiddleware = createAuthMiddlewareForClientCredentialsFlow({
53160
fetch,
54161
})
55162

56-
const httpMiddleware = createHttpMiddleware({
163+
const httpMiddleware = createHttpClient({
57164
host: 'https://api.europe-west1.gcp.commercetools.com',
58165
fetch,
59166
})
@@ -62,7 +169,7 @@ const ctpClient = createClient({
62169
middlewares: [authMiddleware, httpMiddleware],
63170
})
64171

65-
const apiRoot: ApiRoot = createApiBuilderFromCtpClient(ctpClient)
172+
const apiRoot = createApiBuilderFromCtpClient(ctpClient)
66173

67174
apiRoot
68175
.withProjectKey({
@@ -104,29 +211,9 @@ apiRoot
104211
})
105212
```
106213

107-
# TypeScript SDK Client v2
214+
See an actual usage example [here](https://github.com/commercetools/commercetools-sdk-typescript/blob/master/examples/node/node.js)
108215

109-
The **@commercetools/sdk-client-v2** is the TypeScript package that facilitates HTTP [requests](https://commercetools.github.io/nodejs/sdk/Glossary.html#clientrequest) to the Platform, ML or History API by using a predefined set of middlewares.
110-
111-
Unlike the Node.js client, the TypeScript client is a little different in its usage however, they are both very similar in every other way and backwards compatible with the Nodejs client.
112-
113-
### Install
114-
115-
```bash
116-
npm install --save @commercetools/sdk-client-v2
117-
or
118-
yarn add @commercetools/sdk-client-v2
119-
```
120-
121-
<!-- ### Browser
122-
```js
123-
<script src="https://unpkg.com/@commercetools/platform-sdk/dist/platform-sdk.umd.js"></script>
124-
<script>
125-
// global: TypescriptSdk
126-
</script>
127-
``` -->
128-
129-
### Usasge example
216+
# Comprehensive usasge example
130217

131218
Example on how to build a client using only the `defaultClient` class method. The default client enables client creation using very minimal configuratioin.
132219

@@ -135,15 +222,15 @@ Example on how to build a client using only the `defaultClient` class method. Th
135222
import { ClientBuilder, Client } from '@commercetools/sdk-client-v2'
136223

137224
const projectKey = 'demo-key'
138-
const oauthUri = 'https://auth.europe-west1.gcp.commercetools.com'
225+
const authUri = 'https://auth.europe-west1.gcp.commercetools.com'
139226
const baseUri = 'https://api.europe-west1.gcp.commercetools.com'
140227
const credentials = {
141228
clientId: 'clientID12345',
142229
clientSecret: 'clientSecret12345',
143230
}
144231

145232
const client: Client = new ClientBuilder()
146-
.defaultClient(baseUri, credentials, oauthUri, projectKey)
233+
.defaultClient(baseUri, credentials, authUri, projectKey)
147234
.build()
148235
```
149236

@@ -153,14 +240,14 @@ Example
153240

154241
```typescript
155242
const client: Client = new ClientBuilder()
156-
.defaultClient(baseUri, credentials, oauthUri, projectKey)
243+
.defaultClient(baseUri, credentials, authUri, projectKey)
157244
.withUserAgentMiddleware()
158245
.build()
159246

160247
or
161248

162249
const client: Client = new ClientBuilder()
163-
.defaultClient(baseUri, credentials, oauthUri, projectKey)
250+
.defaultClient(baseUri, credentials, authUri, projectKey)
164251
.withUserAgentMiddleware()
165252
.withLoggerMiddleware()
166253
.build()
@@ -178,6 +265,7 @@ import {
178265
AuthMiddlewareOptions,
179266
HttpMiddlewareOptions,
180267
} from '@commercetools/sdk-client-v2'
268+
181269
// create the authMiddlewareOptions object
182270
const authMiddlewareOptions: AuthMiddlewareOptions = {
183271
host: 'https://auth.europe-west1.gcp.commercetools.com',
@@ -186,7 +274,7 @@ const authMiddlewareOptions: AuthMiddlewareOptions = {
186274
clientId: 'clientID12345',
187275
clientSecret: 'clientSecret12345',
188276
},
189-
oauthUri: 'adminAuthUrl',
277+
authUri: 'adminAuthUrl',
190278
scopes: ['manage_project:demo-key'],
191279
fetch,
192280
}
@@ -313,7 +401,7 @@ const options: AuthMiddlewareOptions = {
313401
clientId: 'clientID12345',
314402
clientSecret: 'clientSecret12345',
315403
},
316-
oauthUri: 'admin-authUrl',
404+
oauthUri: '/oauth/token', // - optional custom oauthUri
317405
scopes: ['manage_project:demo-key'],
318406
fetch: fetch
319407
}
@@ -660,7 +748,7 @@ const authMiddlewareOptions: AuthMiddlewareOptions = {
660748
clientId: 'clientID12345',
661749
clientSecret: 'clientSecret12345',
662750
},
663-
oauthUri: 'adminAuthUrl',
751+
oauthUri: '/oauth/token', // - optional custom oauthUri
664752
scopes: ['manage_project:demo-key'],
665753
fetch,
666754
}
@@ -679,7 +767,7 @@ const Client: client = new clientBuilder()
679767

680768
`-`
681769

682-
#### buid()
770+
#### build()
683771

684772
To build the client after calling the class methods of choice that adds the middleware, we invoke the `build()` as the last method on the `new ClientBuilder()` class instance.
685773

integration-tests/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@commercetools/http-user-agent": "2.x",
2020
"@commercetools/inventories-exporter": "^3.0.23",
2121
"@commercetools/personal-data-erasure": "^3.1.0",
22+
"@commercetools/platform-sdk": "^2.2.0",
2223
"@commercetools/price-exporter": "^3.0.23",
2324
"@commercetools/product-exporter": "^3.1.12",
2425
"@commercetools/product-json-to-csv": "^5.0.16",
@@ -33,7 +34,6 @@
3334
"@commercetools/sdk-middleware-user-agent": "^2.1.5",
3435
"@commercetools/state-importer": "^3.0.39",
3536
"@commercetools/sync-actions": "^4.9.6",
36-
"@commercetools/platform-sdk": "^1.19.0",
3737
"bluebird": "^3.5.3",
3838
"common-tags": "^1.8.0",
3939
"csvtojson": "^2.0.8",

packages/sdk-client/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ SDK Client for usage of commercetools platform API
44

55
https://commercetools.github.io/nodejs/sdk/api/sdkClient.html
66

7+
## Note:
8+
9+
This sdk is no longer actively maintained. Follow this [link](https://www.npmjs.com/package/@commercetools/sdk-client-v2) to migrate to the new TypeScript SDK
10+
711
## Install
812

913
```bash

0 commit comments

Comments
 (0)