Strapi is an open-source Headless Content Management system that focuses on managing and delivering content through APIs. One of the main advantages of Strapi CMS is its ability to automatically create a REST API endpoint when a new content type is created. The API allows you to easily interact with the CMS and retrieve or manipulate your data via API calls.
In this article, you'll explore how to use thee fetch()
method of th Fetch API to interact with the content API. The method will help you make HTTP requests in JavaScript. You will use it to retrieve or manipulate data via Strapi's Content API. By the end of this article, you will have all the skills you need to use its fetch()
method for retrieving and manipulating data from Strapi in different use cases.
To comfortably follow along with this guide, you need to have:
The fetch()
method is part of the Fetch API. It is supported in all modern browsers and Node.js
environments. With the fetch()
method, you can make requests and fetch resources.
The Fetch API is a Promise-based API for making HTTP requests in JavaScript. It is widely used as it provides an easier way of performing network operations compared to the older XMLHttpRequest
method. This article will utilize the fetch()
method from this API which has a lot of pros compared to other methods.
fetch()
Method Over Other MethodsThe fetch()
method outshines older methods like XMLHttpRequest
in several ways:
fetch()
method, you can receive chunks of a response as soon as they are available. You do not have to wait for the entire response to complete. This greatly improves the performance of applications that deal with large corporate of data.To appreciate how simple it is to get started with fetch()
method, take a look at its basic syntax.
fetch()
MethodThe syntax involves four main steps:
fetch()
method. 1fetch('https://api.example.com/data')
2 .then(response => response.json()) // Parse the response as JSON
3 .then(data => {
4 // Do something with the data
5 console.log(data);
6 })
7 .catch(error => {
8 // Handle any errors
9 console.error('Error:', error);
10 });
The code shows a high-level overview of how to use the fetch()
method.
Let us now have a look at how you can utilize Fetch with Strapi's content API.
To access the content API in Strapi, you need to create a collection type. After this, you can add fields and data to the collection type.
Start by installing Strapi via npm
at any folder of your choice:
npx create-strapi-app@latest my-project
When the installation is done, navigate to the folder where you installed Strapi and run the following command to launch Strapi.
npm run develop
The command will start the Strapi server. To access the admin panel, navigate to the Strapi admin panel default URL http://localhost:1337/admin
on your browser.
Signup in order to access the admin dashboard:
Next, you need to configure a content type. Let's configure a collection type. Start by naming the collection. You will give it the name strapi-content
.
Then create the field types that will hold your data. For this tutorial, you will build a simple collection type that can serve an online course system. Your field types should match the following. Refer to configuring fields content typeRefer to learn more.
In the image above, we created two Collection type fields, the CourseTitle
and CourseDescription
and type Text
respectively.
You have to configure Strapi to allow you to send API requests.
After creating the fields, proceed to Settings > Users & Permissions Plugin > Roles > Public then choose Strapi-content
under permissions, this represents the Collection type that we created above.
Select all options listed as checkboxes and click the "Save" button. Selecting the options will allow you to send unauthenticated API call requests to Strapi. We will go through how to make API calls for each of the options.
Later on, you will learn how to make authenticated calls.
The strapi-content
Collection type which you created is now exposed. Proceed to the http://localhost:1337/api/strapi-contents endpoint and see the result below.
The API JSON should be similar to the one above since you have not added any data to your collection. Let us go through how you can use fetch()
method to make API calls that will add data to your collection, and then perform retrieval, updation, and deletion actions on the data.
To begin working with Strapi's Content API, you'll need to set up a dedicated project environment. Follow these steps:
mastering_strapi
. This will serve as the root directory for your project.mastering_strapi
folder.strapi_content_api.js
. This file will contain all the API call code examples we'll be working with. Each API call covered in this guide is independent. This means you can test and run each call separately as needed.node
by executing the following command on your terminal:1node strapi_content_api.js
This command will execute the JavaScript file and perform any API calls you will implement.
fetch()
in StrapiTo create data with fetch()
in Strapi, you have to create entries to your collection. You can achieve this by making a POST
requests to your API endpoint using the fetch()
method.
1// ./strapi_content_api.js
2
3// Function to create a new entry
4async function createEntry(data) {
5 const url = "http://localhost:1337/api/strapi-contents";
6
7 try {
8 const response = await fetch(url, {
9 method: "POST",
10 headers: {
11 "Content-Type": "application/json",
12 },
13 body: JSON.stringify({ data }),
14 });
15
16 if (!response.ok) {
17 const errorData = await response.json();
18 throw new Error(errorData.message || "Network response was not ok");
19 }
20
21 const jsonResponse = await response.json();
22 console.log("Success:", jsonResponse);
23 } catch (error) {
24 console.error("Error:", error);
25 }
26}
27
28// Data for the entries
29const entries = [
30 {
31 CourseTitle: "Introduction to Strapi",
32 CourseDescription:
33 "A beginner-friendly course introducing the basics of Strapi, a powerful headless CMS.",
34 },
35 {
36 CourseTitle: "Strapi for Content Management",
37 CourseDescription:
38 "A comprehensive course on using Strapi for effective content management.",
39 },
40 {
41 CourseTitle: "Building APIs with Strapi",
42 CourseDescription:
43 "Learn how to build robust APIs quickly using Strapi and improve your web development skills.",
44 },
45 {
46 CourseTitle: "Securing Strapi Applications",
47 CourseDescription:
48 "A course focused on the security aspects of Strapi applications, including authentication and permissions.",
49 },
50 {
51 CourseTitle: "Deploying Strapi on Cloud",
52 CourseDescription:
53 "A practical course on deploying Strapi applications on various cloud platforms for high availability and scalability.",
54 },
55];
56
57// Create each entry
58entries.forEach((entry) => createEntry(entry));
In the above code, you define an asynchronous function that sends a POST request to your Strapi API endpoint /api/strapi-contents
with the data for a new entry. The function specifies that the data is to be sent in a JSON format. The function then handles the response received from the Strapi backend.
If the response status code is in the range 200-299
the function fetches the response data using response.json()
and logs it to the console. If there is an error during the when the request is made, a new Error
object is thrown with the error message or the predefined message. Make sure that the data you are sending to Strapi contain the predefined collection fields and that there are no typos.
Now, run the server with the command to make the POST
request.
node strapi_content_api.js
When we run the code above, we should see a successful response in the terminal.
To confirm this, if you proceed to the Strapi endpoint http://localhost:1337/api/strapi-contents
in your browser, the API JSON should include the uploaded data.
Now, let's see how you can retrieve this data.
fetch()
in Strapifetch()
in Strapi For the data to be consumed by your application you need to retrieve it. To achieve this, go ahead and use the fetch()
method to make the GET
request to the Strapi API endpoint. We will look at how to retrieve the full data and then specific collection fields.
1// ./strapi_content_api.js
2
3// ./strapi_content_api.js
4
5// Function to retrieve entries
6async function getEntries() {
7 const url = "http://localhost:1337/api/strapi-contents";
8
9 try {
10 const response = await fetch(url, {
11 method: "GET",
12 headers: {
13 "Content-Type": "application/json",
14 },
15 });
16
17 if (!response.ok) {
18 const errorData = await response.json();
19 throw new Error(errorData.message || "Network response was not ok");
20 }
21
22 const jsonResponse = await response.json();
23 const entries = jsonResponse.data; // Accessing the 'data' array
24 console.log("Data retrieved:", entries);
25
26 // retrieve specific collection fields
27
28 /* const courseTitles = entries.map(entry => entry.CourseTitle);
29 console.log('Course Titles:', courseTitles);
30 // console.log('Data retrieved:', entries);*/
31 } catch (error) {
32 console.error("Error:", error);
33 }
34}
35
36getEntries();
The code above defines a function that makes a GET
request to the Strapi API endpoint /api/strapi-contents
to retrieve data. If there is an error during the fetching process, the function throws a new Error with the error message or the predefined message. Let us see the actual logic of how to retrieve the data.
In Strapi's response structure, the actual data is contained in the data
property of the jsonResponse
object. So, when the function receives the API data from the API endpoint it extracts the data
array from the response. The extracted data
array looks like this:
If you want to access the data of a specific field in your collection, uncomment the retrieve specific collection fields code. It maps over the entries array to extract specific properties, such as CourseTitle. Replace the CourseTitle with your desired field.
fetch()
in StrapiIf you want to retrieve a specific entry, modify the URL to include the entry's ID. Strapi content API lets you access a specific entry by appending the entry's ID to your endpoint URL. Here is how you can modify the function above.
1async function getEntry(entryId) {
2 const url = `http://localhost:1337/api/strapi-contents/${entryId}`;
3
4 // rest of code remains the same
5}
Then while calling the function pass the ID of the entry you want to retrieve, in this case entryId
.
Now that you know how to add and retrieve data in Strapi using the fetch()
method, let's see how you can update or delete specific entries.
fetch()
in Strapifetch()
in StrapiTo update data with fetch()
in Strapi, you need the ID of the entry. Let's see how you can update the entry with an id
number of 4 by making a PUT
request using the fetch()
method.
1// ./strapi_content_api.js
2
3// Function to update an entry
4async function updateEntry(entryId) {
5 const url = `http://localhost:1337/api/strapi-contents/${entryId}`;
6 const updatedData = {
7 data: {
8 CourseTitle: "Advanced Programming",
9 CourseDescription: "An advanced course on programming concepts.",
10 },
11 };
12
13 try {
14 const response = await fetch(url, {
15 method: "PUT",
16 headers: {
17 "Content-Type": "application/json",
18 },
19 body: JSON.stringify(updatedData),
20 });
21
22 if (!response.ok) {
23 const errorData = await response.json();
24 throw new Error(errorData.message || "Network response was not ok");
25 }
26
27 const jsonResponse = await response.json();
28 console.log("Update successful:", jsonResponse);
29 } catch (error) {
30 console.error("Error:", error);
31 }
32}
33
34updateEntry(4); // Replace with your preferred entry ID
The code above defines a function that takes entryId
as an argument. The entryId
represents the ID of an entry. The function is responsible for making a PUT
request to your Strapi content API endpoint at /api/strapi-contents
to update an existing entry. The function constructs a new URL that contains the id of the entry you want to update. It then uses the fetch()
method to make a PUT
request to the endpoint with the provided URL and request options.
The data or details of an entry is replaced with the data you pass during the PUT
request. This completes the update process. If there is an error during the update, the error data is fetched from the response, and a new Error
object is thrown with the error message or a default message. If the response is OK
, the function fetches the response data usingresponse.json()
and logs it to the console.
Take a look at how the first entry is updated with the data you passed.
You can see the update was successful. Let's see how we can now delete a specific entry.
fetch()
in StrapiTo delete data with fetch()
in Strapi, you should pass the entry's ID as we did during entry update. But instead of passing the PUT
method you should pass the DELETE
method of the fetch()
method.
1// ./strapi_content_api.js
2
3// Function to delete an entry
4async function deleteEntry(entryId) {
5 const url = `http://localhost:1337/api/strapi-contents/${entryId}`;
6
7 try {
8 const response = await fetch(url, {
9 method: "DELETE",
10 headers: {
11 "Content-Type": "application/json",
12 },
13 });
14
15 if (!response.ok) {
16 const errorData = await response.json();
17 throw new Error(errorData.message || "Network response was not ok");
18 }
19
20 console.log("Delete successful");
21 } catch (error) {
22 console.error("Error:", error);
23 }
24}
25
26deleteEntry(5); // Replace with your preffered entry ID
The function will delete the entry with the ID number 5
. For the error handling, it uses the same exact logic as explained in the code for updating an entry. Take a look at the new API
data.
You can see the entry with id
number 5 was successfully deleted.
You have now covered how to make non-authenticated requests to the Strapi contents API endpoint. But what about when you want all the above API calls to be performed by authorized persons only? Strapi content API endpoint has you covered.
fetch()
in StrapiTo authenticated API calls, you need to the configure Strapi content API endpoint to restrict access to only authenticated users. You also need to update your API calls by passing your authentication token.
Head over to Settings > Users & Permissions Plugin > Roles > Public then choose Strapi-content) under permissions. Select all allowed actions and click save.
Then proceed to Settings > Users & Permissions Plugin > Roles >Authenticated. Under Strapi-content, select all allowed actions or select the ones you want to utilize and save.
Then proceed to Settings API Tokens and create an API token that will authenticate your requests.
Make sure to save the token in a safe place as you won't be able to see it again when you exit the page.
fetch()
in StrapiTo make an authenticated API call, you need to pass the authentication token in the request header. That's the only modification to the API calls you made earlier. Let's look at how to retrieve data from the secure endpoint.
1// ./strapi_content_api.js
2
3async function getEntries() {
4 const url = "http://localhost:1337/api/strapi-contents";
5 const token = "YOUR_TOKEN"; // Replace with your token
6
7 try {
8 const response = await fetch(url, {
9 method: "GET",
10 headers: {
11 "Content-Type": "application/json",
12 Authorization: `Bearer ${token}`, // Include the Authorization header
13 },
14 });
15
16 if (!response.ok) {
17 const errorData = await response.json();
18 throw new Error(errorData.message || "Network response was not ok");
19 }
20
21 const jsonResponse = await response.json();
22 const entries = jsonResponse.data; // Accessing the 'data' array
23 console.log("Data retrieved:", entries);
24
25 // retrieve specific collection fields
26
27 /* const courseTitles = entries.map(entry => entry.CourseTitle);
28 console.log('Course Titles:', courseTitles);
29 // console.log('Data retrieved:', entries);*/
30 } catch (error) {
31 console.error("Error:", error);
32 }
33}
34
35getEntries();
Update the other codes accordingly if you would like to secure your endpoint. Make sure you do not share the API token in public repositories. The best way is to store it in an environmental variable.
You have by far been making basic calls. Check out Guide on authenticating requests with the REST API to learn more. Let's take a look at more advanced case scenarios.
fetch()
in StrapiIn this section of advanced API calls using fetch()
in Strapi, you will handle Strapi internals such as file uploads and downloads, pagination, and filtering, and finally how to populate related data.
fetch()
in StrapiWhen you have a very large dataset, retrieving all the data present in the content API endpoint might overwhelm the server or your frontend. To make the data manageable, you should retrieve the data in chunks through pages.
Strapi provides two methods for pagination. page-based pagination and offset-based pagination.
page
here specifies the desired page number (starts from 1). Page-based pagination is more intuitive. You will often use it when dealing with paginated views in a UI. Here's how you can implement it:
1// ./strapi_content_api.js
2
3// Function to retrieve paginated entries using page-based pagination
4async function getPageBasedEntries(page, pageSize) {
5 const url = `http://localhost:1337/api/strapi-contents?pagination[page]=${page}&pagination[pageSize]=${pageSize}`;
6 const token = "Your API token"; // Replace with your token
7
8 console.log(`Fetching paginated entries from: ${url}`);
9
10 try {
11 const response = await fetch(url, {
12 method: "GET",
13 headers: {
14 "Content-Type": "application/json",
15 Authorization: `Bearer ${token}`, // Include the Authorization header
16 },
17 });
18
19 if (!response.ok) {
20 const errorData = await response.json();
21 console.error("Error details:", errorData);
22 throw new Error(errorData.message || "Network response was not ok");
23 }
24
25 const jsonResponse = await response.json();
26 const entries = jsonResponse.data; // Accessing the 'data' array
27 console.log("Paginated Data retrieved:", entries);
28 } catch (error) {
29 console.error("Error occurred:", error.message);
30 }
31}
32
33getPageBasedEntries(1, 10); // Retrieve the first page with 10 entries per page
The function above takes the page
and pageSize
as its parameters. The page
represents the page number you want to retrieve and the pagesize
represents the number of entries to fetch per page. The function constructs a URL string that points to the Strapi API endpoint including the query parameters for pagination. The function then uses the fetch()
method to make a GET
request to the constructed URL
.If any errors occur during the process, they are caught and logged using console.error
.
Offset
indicates the number of entries to skip before starting the retrieval. Offset-based pagination is useful when you need more control over the number of entries skipped before fetching the data. Let's see how to implement it.
1// ./strapi_content_api.js
2
3// Function to retrieve paginated entries using offset-based pagination
4async function getOffsetBasedEntries(start, limit) {
5 const url = `http://localhost:1337/api/strapi-contents?pagination[start]=${start}&pagination[limit]=${limit}`;
6 const token = "Your API token"; // Replace with your token
7
8 console.log(`Fetching paginated entries from: ${url}`);
9
10 try {
11 const response = await fetch(url, {
12 method: "GET",
13 headers: {
14 "Content-Type": "application/json",
15 Authorization: `Bearer ${token}`, // Include the Authorization header
16 },
17 });
18
19 if (!response.ok) {
20 const errorData = await response.json();
21 console.error("Error details:", errorData);
22 throw new Error(errorData.message || "Network response was not ok");
23 }
24
25 const jsonResponse = await response.json();
26 const entries = jsonResponse.data; // Accessing the 'data' array
27 console.log("Paginated Data retrieved:", entries);
28 } catch (error) {
29 console.error("Error occurred:", error.message);
30 }
31}
32
33getOffsetBasedEntries(2, 10); // Retrieve entries starting from index 2, limit to 10 entries
The above function is very similar to the Page-based Pagination one. The only difference is that the above function takes start and limit parameters. The start
parameter represents the starting index from which to retrieve entries. The limit
represents the maximum number of entries to fetch.
fetch()
method in StrapiSometimes, you want to retrieve data that meets certain criteria. Strapi supports retrieving specific subsets of data based on certain specifications. Let's see how we can implement this using code.
1// ./strapi_content_api.js
2
3// Function to retrieve filtered entries
4async function getFilteredEntries(filterKey, filterValue) {
5 const filterQuery = `filters[${filterKey}][$contains]=${filterValue}`;
6 const url = `http://localhost:1337/api/strapi-contents?${filterQuery}`;
7 const token = "YOUR_TOKEN"; // Replace with your token
8
9 console.log(`Fetching filtered entries from: ${url}`);
10
11 try {
12 const response = await fetch(url, {
13 method: "GET",
14 headers: {
15 "Content-Type": "application/json",
16 Authorization: `Bearer ${token}`, // Include the Authorization header
17 },
18 });
19
20 if (!response.ok) {
21 const errorData = await response.json();
22 console.error("Error details:", errorData);
23 throw new Error(errorData.message || "Network response was not ok");
24 }
25
26 const jsonResponse = await response.json();
27 const entries = jsonResponse.data; // Accessing the 'data' array
28 console.log("Filtered Data retrieved:", entries);
29 } catch (error) {
30 console.error("Error occurred:", error.message);
31 }
32}
33
34// Example usage
35const filterKey = "CourseTitle";
36const filterValue = "Strapi";
37
38getFilteredEntries(filterKey, filterValue);
Strapi uses filters
and contains
parameters to filter data. filters
specifies the field and contains
specifies the string you are looking for in the field's entry.
The above function retrieves the entries in which the CourseTitle
contains the word Strapi
.
To have a look at all the parameters you can use during filtering, take a look at this guide.
You can as well learn about Demystifying Strapi's Populate & Filtering.
fetch()
Method in StrapiWhen working with relationships in your content types, you may need to fetch related data along with your main entries. Strapi's Content API makes this easy with the populate
parameter.
Go back to Strapi and create a new Collection type named Review
. This will store the reviews for each course. Then add review
and relations
fields to the collection. The relation field will define the relationship between a course and a review. If you have difficulty doing so, refer to this video about building data relations in Strapi. The new collection should look like this.
Go ahead and expose the collection as we did earlier and also create a new entry by reviewing a course.
Let's see how to populate related data.
1// ./strapi_content_api.js
2
3// Function to retrieve entries and populate related data
4async function getEntriesWithPopulate() {
5 // Replace '*' with specific relations if needed
6 const url = "http://localhost:1337/api/strapi-contents?populate=*";
7 const token = "Your token"; // Replace with your token
8
9 console.log(`Fetching entries with populated data from: ${url}`);
10
11 try {
12 const response = await fetch(url, {
13 method: "GET",
14 headers: {
15 "Content-Type": "application/json",
16 Authorization: `Bearer ${token}`, // Include the Authorization header
17 },
18 });
19
20 if (!response.ok) {
21 const errorData = await response.json();
22 console.error("Error details:", errorData);
23 throw new Error(errorData.message || "Network response was not ok");
24 }
25
26 const jsonResponse = await response.json();
27 const entries = jsonResponse.data; // Accessing the 'data' array
28
29 console.dir(entries, { depth: null });
30 } catch (error) {
31 console.error("Error occurred:", error.message);
32 }
33}
34
35getEntriesWithPopulate();
The code above instructs the content API to populate all related data for the fetched entries. You can replace *
with specific relations if needed For example if you have many relations and you want to only populate the review relation, you should pass ?review
.
Notice in the above code you used console.dir
to print the output instead of console.log
. The reason is console.log()
function in Node.js does not fully print nested objects beyond a certain depth. So to print the full response you use console.dir()
. Here is how the response looks:
In the response, you can see that in the first entry, there is a new attribute that contains the review.
fetch()
So far you have been dealing with text data. This section will advance your knowledge by showing you how to handle media data.
Create two more fields of type media in your strapi-content
Collection type and name them CourseLogo
and CourseMaterials
. They will store your media data. Your collection should look this:
The Strapi Content API supports file uploads and downloads.
To upload a file, create a FormData
object containing the file data. Then, pass it to the fetch()
method. To upload a file you will use the POST
method of the fetch()
method and associate it with the specific field and entry.
You will need fs
(File System) for working with file paths and form-data
for creating multipart/form-data requests.
1// ./strapi_content_api.js
2
3import fs from "fs";
4import fetch from "node-fetch";
5import FormData from "form-data";
6
7// Function to upload file and link it to a specific entry
8async function uploadFileAndLink(filePath, refId, ref, field) {
9 const url = "http://localhost:1337/api/upload";
10 const token = "your-token"; // Replace with your token
11
12 const formData = new FormData();
13 formData.append("files", fs.createReadStream(filePath));
14 formData.append("refId", refId);
15 formData.append("ref", ref);
16 formData.append("field", field);
17
18 try {
19 const response = await fetch(url, {
20 method: "POST",
21 headers: {
22 Authorization: `Bearer ${token}`, // Include the Authorization header
23 },
24 body: formData,
25 });
26
27 if (!response.ok) {
28 // Handle non-JSON responses correctly
29 const text = await response.text();
30 throw new Error(text);
31 }
32
33 const jsonResponse = await response.json();
34 console.log("File uploaded and linked successfully:", jsonResponse);
35 return jsonResponse;
36 } catch (error) {
37 console.error("Error:", error);
38 }
39}
40
41// Function to update a specific entry with unique files
42async function updateSpecificEntry(entryId, logoPath, materialsPaths) {
43 try {
44 // Upload course logo and link to the entry
45 await uploadFileAndLink(
46 logoPath,
47 entryId,
48 "api::strapi-content.strapi-content",
49 "CourseLogo",
50 );
51
52 // Upload course materials (e.g., PDFs) and link to the entry
53 for (const material of materialsPaths) {
54 await uploadFileAndLink(
55 material,
56 entryId,
57 "api::strapi-content.strapi-content",
58 "CourseMaterials",
59 );
60 }
61 } catch (error) {
62 console.error("Error in updating entry with unique files:", error);
63 }
64}
65
66// Run the function to update a specific entry
67const entryId = 4; // Specify the entry ID to update
68const logoPath = "logo-advanced-programming.jpg"; // Specify the path to the logo file
69const materialsPaths = ["material1.pdf"]; // Specify the paths to the material files
70updateSpecificEntry(entryId, logoPath, materialsPaths);
The above code contains two functions. The first function takes the following parameters during upload:
refId
: This is the ID of the entry to which the file should be linked.ref
: This is the API endpoint reference for the entry type.field
: This is the field name in the entry where the file should be linked.filePath
: This is the path to the file that needs to be uploaded.It then creates a new FormData
object to hold the file
and the metadata
required for uploading and linking the file. The function then uses fetch()
to make a POST
request to the constructed URL. It then sends the FormData
object as the request body and handle the errors that might occur.
The second function takes three parameters: entryId
, logoPath
, and materialsPaths
. It is responsible for updating your entries with the media data.
entryId
: This is the ID of the entry that needs to be updated.logoPath
: This is the path to the logo file that should be uploaded and linked to the entry.materialsPaths
: This is an array of paths to the course material files that should be uploaded and linked to the entry.The function calls the uploadFileAndLink
function to upload the logo file and link it to the specified entry using the CourseLogo
field. Then, it iterates over the materialsPaths
array and calls the uploadFileAndLink
function for each material file, linking them to the specified entry using the CourseMaterials
field. If any errors occur during the file upload and linking process, they are caught and logged into the console. The screenshot below shows the JSON logged onto the console showing the uploaded files and their descriptions.
You can also check whether the files were uploaded directly in Strapi. To do so, proceed to the Strapi dashboard, and click on Media Library. Your uploads will be located in the API Uploads folder.
In the screenshot above, you can see that the two files were uploaded successfully.
To download files follow these steps:
URLs
of the files or photos.URLs
.1// ./strapi_content_api.js
2
3import fs from "fs";
4import fetch from "node-fetch";
5import path from "path";
6import { fileURLToPath } from "url";
7
8// Function to retrieve a specific content entry with populated media fields
9async function getEntry(entryId) {
10 const url = `http://localhost:30080/api/strapi-contents/${entryId}?populate=*`;
11 const token = "YOUR_AUTH_TOKEN"; // Replace with your token
12
13 try {
14 const response = await fetch(url, {
15 method: "GET",
16 headers: {
17 "Content-Type": "application/json",
18 Authorization: `Bearer ${token}`, // Include the Authorization header
19 },
20 });
21
22 if (!response.ok) {
23 throw new Error("Failed to fetch content entry");
24 }
25
26 const jsonResponse = await response.json();
27 return jsonResponse.data; // Return the entry data
28 } catch (error) {
29 console.error("Error:", error);
30 }
31}
32
33// Function to download a file from a given URL
34async function downloadFile(fileUrl, dest) {
35 const response = await fetch(fileUrl);
36 if (!response.ok) {
37 throw new Error(`Failed to download file: ${response.statusText}`);
38 }
39
40 const fileStream = fs.createWriteStream(dest);
41 await new Promise((resolve, reject) => {
42 response.body.pipe(fileStream);
43 response.body.on("error", reject);
44 fileStream.on("finish", resolve);
45 });
46}
47
48// Function to download files linked to a specific entry
49async function downloadEntryFiles(entryId) {
50 try {
51 // Retrieve the specific entry data with populated media fields
52 const entry = await getEntry(entryId);
53
54 if (!entry) {
55 console.log(`Entry ID ${entryId} not found.`);
56 return;
57 }
58
59 // Determine the directory path for downloads
60 const __filename = fileURLToPath(import.meta.url);
61 const __dirname = path.dirname(__filename);
62
63 // Download CourseLogo
64 const logo = entry.attributes.CourseLogo?.data;
65 if (logo) {
66 const logoUrl = `http://localhost:30080${logo.attributes.url}`;
67 const logoDest = path.join(__dirname, path.basename(logo.attributes.url));
68 await downloadFile(logoUrl, logoDest);
69 console.log(`Downloaded CourseLogo to ${logoDest}`);
70 }
71
72 // Download CourseMaterials
73 const materials = entry.attributes.CourseMaterials?.data || [];
74 for (const material of materials) {
75 const materialUrl = `http://localhost:30080${material.attributes.url}`;
76 const materialDest = path.join(
77 __dirname,
78 path.basename(material.attributes.url),
79 );
80 await downloadFile(materialUrl, materialDest);
81 console.log(`Downloaded CourseMaterial to ${materialDest}`);
82 }
83 } catch (error) {
84 console.error("Error in downloading entry files:", error);
85 }
86}
87
88// Run the function to download files for a specific entry
89const entryId = 4; // Specify the entry ID to download files for
90downloadEntryFiles(entryId);
The above code has three functions. The first function named getEntry
fetches the entry details with populated media fields from the Strapi API. It uses a specified entryId
and authorization token. The downloadFile
function handles downloading a file from a given URL to a specified destination.
The core function is the downloadEntryFiles
function, it retrieves the entry data and iterates over the media fields (CourseLogo
and CourseMaterials
), constructing the URLs and file paths for each media file. It then calls downloadFile
to save each file to the local directory. The code uses import.meta.url
with fileURLToPath
to determine the directory path for saving the downloaded files, ensuring compatibility with ES modules.
Once you run the code, the downloaded files are saved at the same folder as your project folder.
You now have extensive knowledge of making API calls to Strapi's content API in different case scenarios, such as fetching data, fetching specific data, updating data, creating data, and deleting data using the fetch()
method of the Fetch API.
Furthermore, we looked at more advanced ways of using the fetch()
, which includes pagination, filtering, population, file upload, and file download.
It's important to remember that the possibilities for advancing your API call logic are endless. The resources provided below are just the beginning. Keep exploring and learning to take your knowledge to the next level.
Denis works as a software developer who enjoys writing guides to help other developers. He has a bachelor's in computer science. He loves hiking and exploring the world.