When using Strapi you may run across a scenario where you need to return data not stored in Strapi's database. Suppose you need to fetch a social media user avatar, a stock quote, or other data available from a third party API. We will use Strapi as a proxy to request the data and return the information to the client app, avoiding any potential CORS problems.
While we will be using a user avatar as an example, the implementation presented in this article will also be application to any data that needs to be requested via a third-party API.
When registering a user on another one of my sites, picke.rs, I wanted to give the user an option to use an avatar they had registered with another service as their picke.rs avatar without requiring the user to find and upload an image from their device. We can use their email address and the unavatar service to try and locate a social image for the user.
Why Custom?
You may have noticed the Strapi guide about fetching external data. If your data does not need to be real-time or stored in Strapi's database, that will be a better route to follow.
In this example we want the results to be real-time and requested only when necessary. Therefore, we have no need of a model to store the data in the database and we can simplify the structure presented in Strapi guide.
Creating The Route
Create the file api/avatar/config/routes.json
in your Strapi project. You will need to create the avatar
and config
folders within the api
folder.
{
"routes": [
{
"method": "GET",
"path": "/avatars/:id",
"handler": "avatar.find",
"config": {
"policies": []
}
}
]
}
This route defines the HTTP method, the path, and which method will handle the request.
The path has a dynamic id
defined which will be passed to the handling method via the ctx
. We'll use the id
set via the url submitted by the user in order to query the API.
Handle The Request
Create the file api/avatar/controllers/avatar.js
in your Strapi project. This is where we will create the find
method.
const axios = require("axios");
module.exports = {
/**
* Retrieve a user avatar.
*
* @return {String}
*/
async find(ctx) {
if (ctx.params.id.length < 4 || !ctx.params.id.includes("@") || !ctx.params.id.includes(".")) {
return ctx.badRequest("Invalid email address");
}
const { data } = await axios.get(`https://unavatar.now.sh/${ctx.params.id}?json`);
if (data.url.includes("fallback")) {
return ctx.send({ url: null });
}
return ctx.send(data);
},
};
In this method we provide some very basic validation to return early if the requested email address does not appear it could be an email address.
Next, we use Axios (you can use any method or library of your choice to make the API request) to make a request to unavatar which is a handy little service to query for avatars across multiple social media networks.
For this case, if unavatar cannot find a social media avatar for the supplied email address, we return null instead of the fallback image. If you'd prefer to use the unavatar provided fallback, then return the returned data without the fallback check.
The ctx
parameter is injected by Strapi and it is what contains information about the request such as the route ID we defined in the routes.json
file
Updating The Roles & Permissions
When the route and method have been created and the Strapi server is restarted Strapi will add the new find
method to the available permissions in the admin's Roles & Permissions section. We'll want to enable this for all the necessary available roles. If only unauthenticated users will call this method, then only enable it for public
if other roles will call this method then enable it for those roles as well.
Calling From The Client
Now in our client we can call the route /avatars/me@example.com
in a Vue application the method would look something similar to the following.
methods: {
async downloadAvatar () {
if (this.login.length < 4) {
this.avatarLink = null
this.useAvatar = false
return
}
const { data } = await this.$axios.get(`/avatars/${this.login}`)
this.avatarLink = data.url
if (data.url !== null) {
this.useAvatar = true
}
}
}
Top comments (0)