Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated Apr 29, 2024

Fetch data

To invoke an endpoint, you need to set apiName, path and headers parameters, and each method returns a Promise. Under the hood the API category utilizes Axios to execute the HTTP requests. API status code response > 299 are thrown as an exception. If you need to handle errors managed by your API, work with the error.response object.

GET requests

1const apiName = 'MyApiName';
2const path = '/path';
3const myInit = {
4 headers: {}, // OPTIONAL
5 response: true, // OPTIONAL (return the entire Axios response object instead of only response.data)
6 queryStringParameters: {
7 name: 'param' // OPTIONAL
8 }
9};
10
11API.get(apiName, path, myInit)
12 .then((response) => {
13 // Add your code here
14 })
15 .catch((error) => {
16 console.log(error.response);
17 });

Example with async/await

1function getData() {
2 const apiName = 'MyApiName';
3 const path = '/path';
4 const myInit = {
5 headers: {} // OPTIONAL
6 };
7
8 return API.get(apiName, path, myInit);
9}
10
11(async function () {
12 const response = await getData();
13})();

GET requests with query parameters

To use query parameters with get method, you can pass them in queryStringParameters parameter in your method call:

1const items = await API.get('myCloudApi', '/items', {
2 queryStringParameters: {
3 order: 'byPrice'
4 }
5});
1const apiName = 'MyApiName'; // replace this with your api name.
2const path = '/path'; //replace this with the path you have configured on your API
3const myInit = {
4 headers: {} // OPTIONAL
5};
6
7API.head(apiName, path, myInit).then((response) => {
8 // Add your code here
9});

Example with async/await:

1function head() {
2 const apiName = 'MyApiName';
3 const path = '/path';
4 const myInit = {
5 headers: {} // OPTIONAL
6 };
7
8 return API.head(apiName, path, myInit);
9}
10
11(async function () {
12 const response = await head();
13})();

Accessing query parameters & body in Lambda proxy function

To learn more about Lambda Proxy Integration, please visit Amazon API Gateway Developer Guide.

If you are using a REST API which is generated with Amplify CLI, your backend is created with Lambda Proxy Integration, and you can access your query parameters & body within your Lambda function via the event object:

1exports.handler = function (event, context, callback) {
2 console.log(event.queryStringParameters);
3 console.log('body: ', event.body);
4};

Alternatively, you can update your backend file which is located at amplify/backend/function/[your-lambda-function]/app.js with the middleware:

1const awsServerlessExpressMiddleware = require('aws-serverless-express/middleware');
2app.use(awsServerlessExpressMiddleware.eventContext());

Accessing Query Parameters with Serverless Express

In your request handler use req.apiGateway.event or req.query:

1app.get('/items', function (req, res) {
2 const query = req.query;
3 // or
4 // const query = req.apiGateway.event.queryStringParameters
5 res.json({
6 event: req.apiGateway.event, // to view all event data
7 query: query
8 });
9});

Then you can use query parameters in your path as follows:

1API.get('sampleCloudApi', '/items?q=test');

Custom response types

By default, calling an API with AWS Amplify parses a JSON response. If you have a REST API endpoint which returns, for example, a file in Blob format, you can specify a custom response type using the responseType parameter in your method call:

1let file = await API.get('myCloudApi', '/items', {
2 responseType: 'blob'
3});

Allowed values for responseType are "arraybuffer", "blob", "document", "json" or "text"; and it defaults to "json" if not specified. See the documentation for more information.