Creating a Related Entry in strapi v4: A Step-by-Step Guide

Whenever I try to add a new record in my Collection-Type, all the field values are successfully added to the new entry except for the value in the field with a Relation type.

For instance, in my event Collection-Type, I have fields like name, performers, venue, address, date, time, description, and user.

The 'user' field is of Relation type (Relation with User (from:users-permission)).

All other fields are Text, DateTime, RichText, etc.

After receiving data from the form submission, the object looks similar to this:

var values = {
        name: 'namevalue',
        performers: 'whatever',
        venue: 'whatever',
        address: 'xyz address',
        date: '2022-12-15',
        time: '10:00 PM',
        description: 'Description of the Event',
    }

I simply update the 'values' object as follows:

var values = {
            name: 'namevalue',
            performers: 'whatever',
            venue: 'whatever',
            address: 'xyz address',
            date: '2022-12-15',
            time: '10:00 PM',
            description: 'Description of the Event',
            user:1
        }

PLEASE NOTE the user:1 that has been added to the object above.

However, after submitting these values to the appropriate endpoint:

const res = await fetch(`${API_URL}/api/events`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${token}`,
            },
            body: JSON.stringify({
                data: values,
            }),
        })

In the Strapi backend, the 'user' field and its value do not appear at all. Here's an example of what I receive:

{
  data: {
    name: '13',
    performers: '13',
    venue: '13',
    address: '13',
    date: '2022-06-10',
    time: '8:00 PM',
    description: '13'
  },
  files: undefined
}

As seen, all the other data is received and saved into the new Entry except for the desired Relation value. What am I overlooking here and how can I resolve this issue?

Answer №1

To access the feature, navigate to your settings and click on user-permission settings. From there, go to authenticated and then user permission. Make sure to enable both the find and findOne scopes under the user section for it to function properly.

Answer №2

My suggestion is to include the query parameter ?populate=* in the URL.

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

What is the reason for jquery requiring _$ when overwriting?

var // Optimizing references to window and allowing renaming window = this, // Increasing efficiency in referencing undefined and enabling renaming undefined, // Creating aliases in case of jQuery overwrite _jQuery = window.jQuery, // Creating aliases in ...

Unexplained Reference Error in Next.js Typescript: Variable Accessed before Initialization

I am currently working on an admin website and encountered the error Block-scoped variable used before its declaration.. I will provide details using images and code. This is my first time seeking help on StackOverflow. Error Message: Block-scoped variab ...

Download the ultimate HTML package with a built-in chart.js component directly from your nuxt app

I have a task to create a compact Nuxt application that produces a basic HTML file containing informative sections about the services offered to the clients of my organization. The main purpose is to generate an HTML file that can be easily downloaded and ...

Unsure why my React component isn't triggering a re-render?

I encountered an issue when trying to update my component based on a state change. When I update the state outside of an HTTP call, the component updates correctly. However, when I try to do the same inside an HTTP get call, the state is updated but the ...

Engaging with tasks like incorporating fresh elements into JavaScript code

I am looking to implement an event listener that triggers whenever a new element is added to the document or any of its children. Can someone recommend a method for accomplishing this? ...

Adding an onload event in a function-based component without using a fetch call

Looking at the code snippet below for a React component: import React from "react"; import { Carousel } from "react-bootstrap"; function CarouselHome() { return ( <> ...

Issue with event binding on datepicker that is dynamically added is not functional

I have integrated the Kendo datepicker into my project, and I am facing an issue with duplicated div elements containing datepickers. The problem is that the datepicker events only fire once on the first duplicated div and then stop working altogether. I ...

What could be causing the <img src= ' '/> tag to malfunction in Express?

While learning about HTML, I noticed that simply using img src="...." worked fine. However, when working with Express, the same code did not work! The documentation mentioned that I needed to place the images in a folder named public, require(&ap ...

The Hidden Power of jQuery: Unleashing the Full Potential of .text()

I'm trying to make two values equal, but it's not working... var rowID = $("#@idSelectObjectGuid").val(); $($(".ls-grid-body tr").children("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="240a64524770454648410a74564d ...

Combining multer, CSRF protection, and express-validator in a Node.js environment

Within my node.js application, I am utilizing an ejs form that consists of text input fields in need of validation by express-validator, an image file managed by multer, and a hidden input housing a CSRF token (a token present in all other forms within the ...

Ways to adjust the color of a cell in a table

I am working on customizing a table in my website where I need to change the color of a single cell in each row, similar to the example shown in this image: Here is the HTML code that I have implemented so far: <table class="table table-hover t ...

What is the best way to incorporate CSS into JavaScript code?

Here is the code I am working with: <script type = "text/javascript"> function pic1() { document.getElementById("img").src = "../images/images/1.png"; } function pic2() { document.getEl ...

Accessing a document using protractor

It seems like every protractor example I come across online uses browser.get with a web URI. browser.get('http://localhost:8000'); I want to use Selenium to navigate to a local file:// path without needing a web server running. Just a simple HT ...

Is the "Illegal invocation" error popping up when using the POST method in AJAX?

Is there a way to retrieve JSON data using the POST method in Ajax? I attempted to use the code below but encountered an error: TypeError: Illegal invocation By following the link above, I was able to access JSON-formatted data. However, please note th ...

How do I ensure a single row in my table constantly remains at the bottom?

I am currently working on developing a MUI table that shows rows, with the last row displaying the total number of colors. The challenge I am facing is ensuring that the last row always stays at the bottom when there are no results in the table. I have att ...

Is it possible for PHP to return jQuery code and have it execute immediately upon being echoed?

As someone who is new to jQuery and PHP, I have been tasked by my boss to create a login system for a web page that contains sensitive company information. The challenge is that this webpage consists of just one html/php file. Here is what I have done so ...

Element cannot be located following the addition of a className in the HTML document

When manually adding id, test-id or classname in an HTML file, it's important to note that Cypress may have trouble finding the element. For example, I have included 'Classname' here just for demonstration purposes. https://i.stack.imgur.co ...

Ways to retrieve the current URL in Next.js without relying on window.location.href or React Router

Is there a way to fetch the current URL in Next.js without relying on window.location.href or React Router? const parse = require("url-parse"); parse("hostname", {}); console.log(parse.href); ...

Placing elements from an array into a customized output

Currently, I am dealing with a unique output: dAmn_Raw('send chat:Sandbox\n\nmsg main\n\nthismessage'); In my code, there exists a variable: myvariable that stores a random value selected from an array I formulated. The cha ...

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...