Skip to content

Commit b55a4ed

Browse files
iartemieviartemiev
committed
feat: add TS examples to API GQL docs
1 parent 66468c9 commit b55a4ed

File tree

7 files changed

+675
-77
lines changed

7 files changed

+675
-77
lines changed

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

Lines changed: 79 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,38 @@ 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 { GraphQLQuery, GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
24+
import { CreateTodoMutation } from './API';
25+
26+
// Creating a post is restricted to IAM
27+
const createdTodo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
28+
query: queries.createTodo,
29+
variables: { input: todoDetails },
30+
authMode: GRAPHQL_AUTH_MODE.AWS_IAM
31+
});
32+
```
33+
34+
</Block>
35+
<Block name="JavaScript">
36+
1937
```js
38+
import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
39+
2040
// Creating a post is restricted to IAM
2141
const createdTodo = await API.graphql({
2242
query: queries.createTodo,
2343
variables: {input: todoDetails},
24-
authMode: 'AWS_IAM'
44+
authMode: GRAPHQL_AUTH_MODE.AWS_IAM
2545
});
2646
```
2747

48+
</Block>
49+
</BlockSwitcher>
50+
2851
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.
2952

3053
<Callout>
@@ -40,6 +63,28 @@ You can implement your own custom API authorization logic using an AWS Lambda fu
4063
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.
4164

4265
The following example assumes `AWS_LAMBDA` is configured as the default authentication type for your API:
66+
67+
<BlockSwitcher>
68+
<Block name="TypeScript">
69+
70+
```ts
71+
import { GraphQLQuery } from '@aws-amplify/api';
72+
import { CreateTodoMutation } from './API';
73+
74+
const getAuthToken = () => 'myAuthToken';
75+
const lambdaAuthToken = getAuthToken();
76+
77+
const createdTodo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
78+
query: queries.createTodo,
79+
variables: {input: todoDetails},
80+
authToken: lambdaAuthToken
81+
});
82+
```
83+
84+
</Block>
85+
86+
<Block name="JavaScript">
87+
4388
```js
4489
const getAuthToken = () => 'myAuthToken';
4590
const lambdaAuthToken = getAuthToken();
@@ -51,16 +96,47 @@ const createdTodo = await API.graphql({
5196
});
5297
```
5398

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

59132
const createdTodo = await API.graphql({
60133
query: queries.createTodo,
61134
variables: {input: todoDetails},
62-
authMode: 'AWS_LAMBDA',
135+
authMode: GRAPHQL_AUTH_MODE.AWS_LAMBDA,
63136
authToken: lambdaAuthToken
64137
});
65138
```
66139

140+
</Block>
141+
</BlockSwitcher>
142+

‎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: 80 additions & 2 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,23 +112,74 @@ 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: (todoData) => {
164+
console.log(todoData);
165+
// Do something with the data
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({
110185
next: (todoData) => {
@@ -114,9 +189,12 @@ const subscription = API.graphql(
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)