Skip to content

Commit 25bf0c2

Browse files
iartemieviartemiev
authored
feat: add TS examples to API GQL docs (#5059)
* feat: add TS examples to API GQL docs * pr feedback * pr feedback 2
1 parent 0cb9aba commit 25bf0c2

File tree

7 files changed

+693
-83
lines changed

7 files changed

+693
-83
lines changed

‎src/fragments/lib/graphqlapi/js/authz.mdx

Lines changed: 86 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,40 @@ In order to use this feature with the Amplify GraphQL Client the `API.graphql({.
1616

1717
This is an example of using `AWS_IAM` as an authorization mode:
1818

19+
<BlockSwitcher>
20+
<Block name="TypeScript">
21+
22+
```ts
23+
import { API, GraphQLQuery, GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
24+
import * as mutations from './graphql/mutations';
25+
import { CreateTodoMutation } from './API';
26+
27+
// Creating a post is restricted to IAM
28+
const createdTodo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
29+
query: mutations.createTodo,
30+
variables: { input: todoDetails },
31+
authMode: GRAPHQL_AUTH_MODE.AWS_IAM
32+
});
33+
```
34+
35+
</Block>
36+
<Block name="JavaScript">
37+
1938
```js
39+
import { API, GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
40+
import * as mutations from './graphql/mutations';
41+
2042
// Creating a post is restricted to IAM
2143
const createdTodo = await API.graphql({
22-
query: queries.createTodo,
44+
query: mutations.createTodo,
2345
variables: {input: todoDetails},
24-
authMode: 'AWS_IAM'
46+
authMode: GRAPHQL_AUTH_MODE.AWS_IAM
2547
});
2648
```
2749

50+
</Block>
51+
</BlockSwitcher>
52+
2853
Previous examples uses `graphqlOperation` function. That function only creates an object with two attributes `query` and `variables`. In order to use `authMode` you need to pass this object as is mentioned on the previous example.
2954

3055
<Callout>
@@ -40,27 +65,82 @@ You can implement your own custom API authorization logic using an AWS Lambda fu
4065
If you are using a Lambda function as an authorization mode with your AppSync API, you will need to pass an authentication token with each API request and will need to manage token refresh in your application.
4166

4267
The following example assumes `AWS_LAMBDA` is configured as the default authentication type for your API:
68+
69+
<BlockSwitcher>
70+
<Block name="TypeScript">
71+
72+
```ts
73+
// ...
74+
75+
const getAuthToken = () => 'myAuthToken';
76+
const lambdaAuthToken = getAuthToken();
77+
78+
const createdTodo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
79+
query: mutations.createTodo,
80+
variables: {input: todoDetails},
81+
authToken: lambdaAuthToken
82+
});
83+
```
84+
85+
</Block>
86+
87+
<Block name="JavaScript">
4388
```js
89+
// ...
90+
4491
const getAuthToken = () => 'myAuthToken';
4592
const lambdaAuthToken = getAuthToken();
4693

4794
const createdTodo = await API.graphql({
48-
query: queries.createTodo,
95+
query: mutations.createTodo,
4996
variables: {input: todoDetails},
5097
authToken: lambdaAuthToken
5198
});
5299
```
53100

101+
</Block>
102+
</BlockSwitcher>
103+
54104
If you have a different default authentication type and would like to use `AWS_LAMBDA` with a request:
55-
```javascript
105+
106+
<BlockSwitcher>
107+
<Block name="TypeScript">
108+
109+
```ts
110+
// ...
111+
import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
112+
import { CreateTodoMutation } from './API';
113+
114+
const getAuthToken = () => 'myAuthToken';
115+
const lambdaAuthToken = getAuthToken();
116+
117+
const createdTodo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
118+
query: mutations.createTodo,
119+
variables: {input: todoDetails},
120+
authMode: GRAPHQL_AUTH_MODE.AWS_LAMBDA,
121+
authToken: lambdaAuthToken
122+
});
123+
```
124+
125+
</Block>
126+
127+
<Block name="JavaScript">
128+
129+
```js
130+
// ...
131+
import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
132+
56133
const getAuthToken = () => 'myAuthToken';
57134
const lambdaAuthToken = getAuthToken();
58135

59136
const createdTodo = await API.graphql({
60-
query: queries.createTodo,
137+
query: mutations.createTodo,
61138
variables: {input: todoDetails},
62-
authMode: 'AWS_LAMBDA',
139+
authMode: GRAPHQL_AUTH_MODE.AWS_LAMBDA,
63140
authToken: lambdaAuthToken
64141
});
65142
```
66143

144+
</Block>
145+
</BlockSwitcher>
146+

‎src/fragments/lib/graphqlapi/js/cancel-request.mdx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ You may cancel any query or mutation request made through API category by keepin
66
const promise = API.graphql(graphqlOperation(...));
77

88
try {
9-
await promise;
9+
await promise;
1010
} catch (error) {
11-
console.log(error);
12-
// If the error is because the request was cancelled you can confirm here.
13-
if(API.isCancel(error)) {
14-
console.log(error.message); // "my message for cancellation"
15-
// handle user cancellation logic
16-
}
11+
console.log(error);
12+
// If the error is because the request was cancelled you can confirm here.
13+
if (API.isCancel(error)) {
14+
console.log(error.message); // "my message for cancellation"
15+
// handle user cancellation logic
16+
}
1717
}
1818

1919
...
@@ -26,7 +26,7 @@ You need to ensure that the promise returned from `API.graphql()` has not been m
2626

2727
```javascript
2828
async function makeAPICall() {
29-
return API.graphql(graphqlOperation(...));
29+
return API.graphql(graphqlOperation(...));
3030
}
3131
const promise = makeAPICall();
3232

‎src/fragments/lib/graphqlapi/js/getting-started.mdx

Lines changed: 83 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,30 @@ Now that the GraphQL API has deployed, it’s time to learn how to interact with
7373

7474
- __Mutations__ - write data to the API (create, update, delete operations)
7575

76+
<BlockSwitcher>
77+
<Block name="TypeScript">
78+
79+
```ts
80+
import { API, graphqlOperation } from 'aws-amplify';
81+
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';
82+
import { GraphQLQuery } from '@aws-amplify/api';
83+
import { CreateTodoInput, CreateTodoMutation, UpdateTodoMutation, DeleteTodoMutation } from './API';
84+
85+
const todo: CreateTodoInput = { name: "My first todo", description: "Hello world!" };
86+
87+
/* create a todo */
88+
await API.graphql<GraphQLQuery<CreateTodoMutation>>(graphqlOperation(createTodo, {input: todo}));
89+
90+
/* update a todo */
91+
await API.graphql<GraphQLQuery<UpdateTodoMutation>>(graphqlOperation(updateTodo, { input: { id: todoId, name: "Updated todo info" }}));
92+
93+
/* delete a todo */
94+
await API.graphql<GraphQLQuery<DeleteTodoMutation>>(graphqlOperation(deleteTodo, { input: { id: todoId }}));
95+
```
96+
97+
</Block>
98+
<Block name="JavaScript">
99+
76100
```js
77101
import { API, graphqlOperation } from 'aws-amplify';
78102
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';
@@ -88,35 +112,89 @@ await API.graphql(graphqlOperation(updateTodo, { input: { id: todoId, name: "Upd
88112
/* delete a todo */
89113
await API.graphql(graphqlOperation(deleteTodo, { input: { id: todoId }}));
90114
```
115+
116+
</Block>
117+
</BlockSwitcher>
118+
91119
- __Queries__ - read data from the API (list, get operations)
92120

121+
<BlockSwitcher>
122+
<Block name="TypeScript">
123+
124+
```ts
125+
import { API, graphqlOperation } from 'aws-amplify';
126+
import { GraphQLQuery } from '@aws-amplify/api';
127+
import { listTodos } from './graphql/queries';
128+
import { ListTodosQuery } from './API';
129+
130+
const todos = await API.graphql<GraphQLQuery<ListTodosQuery>>(graphqlOperation(listTodos));
131+
```
132+
133+
</Block>
134+
135+
136+
<Block name="JavaScript">
137+
93138
```js
94139
import { API, graphqlOperation } from 'aws-amplify';
95140
import { listTodos } from './graphql/queries';
96141

97142
const todos = await API.graphql(graphqlOperation(listTodos));
98143
```
99144

145+
</Block>
146+
</BlockSwitcher>
147+
100148
- __Subscriptions__ - subscribe to changes in data for real-time functionality (onCreate, onUpdate, onDelete)
101149

150+
<BlockSwitcher>
151+
<Block name="TypeScript">
152+
153+
```ts
154+
import { API, graphqlOperation } from 'aws-amplify';
155+
import { GraphQLSubscription } from '@aws-amplify/api';
156+
import { onCreateTodo } from './graphql/subscriptions';
157+
import { OnCreateTodoSubscription } from './API';
158+
159+
// Subscribe to creation of Todo
160+
const sub = API.graphql<GraphQLSubscription<OnCreateTodoSubscription>>(
161+
graphqlOperation(onCreateTodo)
162+
).subscribe({
163+
next: (payload) => {
164+
const createdTodo = payload.value.data?.onCreateTodo;
165+
console.log(createdTodo);
166+
}
167+
});
168+
169+
// Stop receiving data updates from the subscription
170+
sub.unsubscribe();
171+
```
172+
173+
</Block>
174+
175+
<Block name="JavaScript">
176+
102177
```js
103178
import { API, graphqlOperation } from 'aws-amplify';
104179
import { onCreateTodo } from './graphql/subscriptions';
105180

106181
// Subscribe to creation of Todo
107-
const subscription = API.graphql(
182+
const sub = API.graphql(
108183
graphqlOperation(onCreateTodo)
109184
).subscribe({
110-
next: (todoData) => {
111-
console.log(todoData);
112-
// Do something with the data
185+
next: (payload) => {
186+
const createdTodo = payload.value.data?.onCreateTodo;
187+
console.log(createdTodo);
113188
}
114189
});
115190

116191
// Stop receiving data updates from the subscription
117-
subscription.unsubscribe();
192+
sub.unsubscribe();
118193
```
119194
195+
</Block>
196+
</BlockSwitcher>
197+
120198
### Updating Your GraphQL Schema
121199
122200
When you create a GraphQL backend with the CLI, the schema definition for your backend data structure is saved in one of two places:

‎src/fragments/lib/graphqlapi/js/js-configure.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Add Amplify to your app with `yarn` or `npm`:
66
npm install aws-amplify
77
```
88

9-
In your app's entry point i.e. App.js, import and load the configuration file:
9+
In your app's entry point i.e. App.ts or App.js, import and load the configuration file:
1010

1111
```javascript
1212
import { Amplify, API, graphqlOperation } from 'aws-amplify';

0 commit comments

Comments
 (0)