Mastering API Requests: Using Fetch with Strapi's Content API

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.

Prerequisites

To comfortably follow along with this guide, you need to have:

• NodeJs installed in your system
• Basic Knowledge of JavaScript

Understanding Fetch

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.

What is the Fetch API?

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.

Advantages of Using fetch() Method Over Other Methods

The fetch() method outshines older methods like XMLHttpRequest in several ways:

• Simpler syntax: It has a cleaner syntax, making it easier to read and write code.
• Promise-based: It returns a Promise. A Promise is an object that represents the eventual completion or failure of an asynchronous operation. This helps in implementing robust error-handling functions.
• Better cross-origin support: With support for cross-origin requests out of the box, it eliminates the need for additional configurations.
• Better streaming support: With the 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.

Basic Syntax and Usage of the fetch() Method

The syntax involves four main steps:

• Step 1: You pass the URL of the resource you want to fetch.
• Step 2: Then you parse the response returned by the fetch() method.
• Step 3: You handle any errors that might have occurred during the process.
• Step 4: Finally, if the fetching was successful, you do something with your data. Take a look at the basic example below.

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.

Setting up Strapi

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.

Strapi Installation

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:

Create Collection Type

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.

Enable API Public Access

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.

Setting Up Your Environment

To begin working with Strapi's Content API, you'll need to set up a dedicated project environment. Follow these steps:

1. Create a new folder for your project and name it mastering_strapi. This will serve as the root directory for your project.
2. Launch your preferred Integrated Development Environment (IDE) and open the mastering_strapi folder.
3. Within the root of your project folder, create a new file named 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.
4. Run the code using 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.

Create Data with fetch() in Strapi

To 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.

Retrieve Data with fetch() in Strapi

Retrieve Data with fetch() 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.

Retrieve a Specific Entry with fetch() in Strapi

If 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.

Update and Delete Entries with fetch() in Strapi

Update Data with fetch() in Strapi

To 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.

Delete Data With fetch() in Strapi

To 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.

Making Authenticated API Calls with fetch() in Strapi

To 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.

Enable Authenticated Requests to Strapi Content API

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.

Autenticated API Calls With The fetch() in Strapi

To 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.

Making More Advanced API Calls with fetch() in Strapi

In 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.

Pagination and Filtering with fetch() in Strapi

When 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-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-based Pagination

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.

Filtering Data Based on Certain Criteria with The fetch() method in Strapi

Sometimes, 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.

Populating Related Data With the fetch() Method in Strapi

When 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.

Uploading and Downloading files in Strapi Using 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.

Handling File Uploads

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 materialsPathsarray 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.

Handling File Downloads

To download files follow these steps:

1. Retrieve the entry data to get the URLs of the files or photos.
2. Download the files using the 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.

Conclusion

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.

Further Resources

1. https://docs.strapi.io/dev-docs/plugins/upload
2. https://docs.strapi.io/
3. https://github.com/strapi/strapi
4. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch