"Sorry, cannot make a request for the relation field at

I am encountering difficulties when attempting to retrieve the relation field from the API.

export async function fetchContent(params) {
    const reqOptions = {
        headers: {
            Authorization: `Bearer ${process.env.API_TOKEN}`
        }
    };
    const request = await fetch(`${base}/api/guides?populate=*${params}`, reqOptions);
    const response = await request.json();
    return response;    
}


const blogs = await fetchContent(`&filters[Slug][$eq]=${params.slug}`);

I have also made attempts to configure the permission settings for both Authenticated and Public to allow "find" & "findOne".

Any insights on this matter would be greatly appreciated. Thank you!

Answer №1

In my opinion, the problem lies in Next.js where you need to add NEXT_PUBLIC_ before your environment variables to make them accessible in the frontend, as mentioned here

To package environment variables for the browser, use NEXT_PUBLIC_ prefix

Therefore, in your env file, it should be set up like this

NEXT_PUBLIC_API_TOKEN=123456ASDFG

Then, you can retrieve it in your code like this

Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript - Functions in objects losing reference to previously created object properties

Having trouble with my Candy function. When I create an object of the Candy function, all attributes are created correctly. However, when I try to run the draw function, it always uses the properties of the second object created instead of the one I want. ...

Ways to fix the error of "Uncaught TypeError: Cannot convert undefined or null to object"

Here is a function that I am working on: function collect_que_ids(e) { var val = e.val(); var data_lo = e.attr('data-lo'); new_hash = {}; new_hash[val] = data_lo; if(e.is(':checked')){ if(checked_box_hash.includes(new_has ...

Nested state fails to display HTML content or activate controller initialization

I am trying to utilize ui-router's parent/child states with the code snippet below. Everything seems to be in order as there are no console errors, but for some reason the HTML content is not being rendered and the controller's init function is n ...

Rotate background image upon each visit

I have a collection of around 50 background images that I want to display randomly each time a user visits my website. The idea is to provide a unique background image for every visit, without saving any information about which image was previously display ...

What is causing this code to keep iterating endlessly?

I have a basic jquery script embedded in my HTML code that utilizes the cycle plugin for jQuery. The problem I'm facing is that when I interact with the slideshow using the "next" or "previous" buttons, it continues to loop automatically after that in ...

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

Loading GLTF model via XHR may take an infinite amount of time to reach full completion

I am attempting to load a GLTF model of a piano using XHR and showcase the loading progress on a webpage. The model is being loaded utilizing the Three.js library. On a local server, everything works perfectly - the loading percentage is shown accurately, ...

Formatting Numbers in HighCharts Shared Tooltip

My first experience with HighCharts JS has been quite positive. I am currently creating multiple series and using a shared tooltip feature. The numbers displayed in the shared tooltip are accurate, but the formatting is not to my liking. For instance, it s ...

Getting URL Parameters in Angular JS

How should one go about retrieving URL parameters in Angular? For instance, consider this URL: http://example.com/mypage.html?product=1234®ion=4&lang=en Thank you ...

Effortlessly sending multiple values from text fields using jQuery

i am using jQuery to fetch all values from text fields with the same field name. $('input[name^="StudentName"]').each(function() { StudentName += $(this).val(); alert(StudentName); }); when I alert, all the values are displayed as one s ...

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

Utilizing ScrollTo() in Javascript will smoothly navigate the page downward

Within my HTML Document, there lies an input field where you can enter a numerical value, and the window should automatically scroll to that specific pixel number. To achieve this, I utilized the scrollTo() function. However, I encountered an issue where ...

Data tables failing to display accurate data

I have implemented Datatable for a table with eight identical columns and three columns that vary based on the selected radio button. The table is dynamically filled using an ajax call to a python function and the returned data is added to the table body. ...

What is the most optimal jQuery code to use?

Just wondering, which of the following code snippets is more efficient (or if neither, what would be the best way to approach this)? Background - I am working on creating a small image carousel and the code in question pertains to the controls (previous, ...

Move the dist folder to the libs directory using webpack

I am interested in achieving the following task: After successfully using gulp for copying libraries, I added the below code to my tasks: gulp.task('copy:libs', function() { return gulp .src(npmdist(), { base: paths.base.node.dir }) . ...

Issue encountered with youtube-dl-exec and Next.js on Vercel

I've implemented Next.js and youtube-dl-exec in my project. I created an endpoint /api/video/info using Next APIs located in the directory pages/api/video/info.js info.js: import youtubedl from 'youtube-dl-exec' export default async functi ...

Filtering and selecting tables in HTML

I am dealing with an HTML table that combines static data and MySQL input. The filtering functionality is working properly, but I am struggling to add the options "yes" and "no" to the selection list. These values are test inputs fetched from MySQL. I need ...

Is it possible to utilize AJAX to load the URL and then extract and analyze the data rather than

I had originally created a web scraping method using PHP, but then discovered that the platform I was developing on (iOS via phone gap) did not support PHP. Fortunately, I was able to find a solution using JS. $(document).ready(function(){ var container ...

What is the best way to trigger an AJAX request when a user navigates away from a webpage or closes the

The Challenge at Hand Greetings, I am currently developing a database-driven game that involves users answering questions and earning the right to change the question by providing the correct answer. However, I have encountered a significant issue which ...

Sorting the keys of objects within an array

Currently, I am in the midst of an evaluation where I have the freedom to utilize any resources at my disposal. The task at hand involves using the .filter method to remove objects without a specific key. Here is the provided prompt... Create a function n ...