Name:
interface
Value:
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

const apiName = 'MyApiName';
const path = '/path';
const myInit = {
headers: {}, // OPTIONAL
response: true, // OPTIONAL (return the entire Axios response object instead of only response.data)
queryStringParameters: {
name: 'param' // OPTIONAL
}
};
API.get(apiName, path, myInit)
.then((response) => {
// Add your code here
})
.catch((error) => {
console.log(error.response);
});

Example with async/await

function getData() {
const apiName = 'MyApiName';
const path = '/path';
const myInit = {
headers: {} // OPTIONAL
};
return API.get(apiName, path, myInit);
}
(async function () {
const response = await getData();
})();

GET requests with query parameters

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

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

Example with async/await:

function head() {
const apiName = 'MyApiName';
const path = '/path';
const myInit = {
headers: {} // OPTIONAL
};
return API.head(apiName, path, myInit);
}
(async function () {
const response = await head();
})();

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:

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

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

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

Accessing Query Parameters with Serverless Express

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

app.get('/items', function (req, res) {
const query = req.query;
// or
// const query = req.apiGateway.event.queryStringParameters
res.json({
event: req.apiGateway.event, // to view all event data
query: query
});
});

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

API.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:

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

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.