What are the possibilities of using lists or arrays in GraphQL variables

Exploring the possibility of using an array/list as a variable for a GraphQL mutation:

Schema

type User {
  id: Id!
  email: String
  name: String
  bookmarks: [Bookmark]
}

type Mutation {
  updateUser(data: UserInput!): User
}

input UserInput {
  email: String
  name: String
  bookmarks: [Bookmark]
}

type Bookmark {
  vidId: String!
  timestamp: Int!
}

Mutation

mutation($email: String, $name: String, $bookmarks: [{vidId: String!, timestamp: Int!}]) {
  updateUser(data: {email: $email, name: $name, bookmarks: $bookmarks}) {
    email
    name
  }
}

Encountering issues with the variable syntax in the mutation related to the bookmarks array. Seeking guidance on how to correctly pass an array as a GraphQL variable.

Answer №1

GraphQL doesn't allow for anonymous type declarations like

{vidId: String!, timestamp: Int!}
. You need to use a named type instead, or a list of it, or a non-null of it. Simply update your code to look like this:

mutation($email: String, $name: String, $bookmarks: [BookmarkInput]) {
#                                                    ^^^^^^^^^^^^^
  updateUser(data: {email: $email, name: $name, bookmarks: $bookmarks}) {
    email
    name
  }
}

and define the following in your schema:

input BookmarkInput {
  vidId: String!
  timestamp: Int!
}

This will make sure that your GraphQL queries are correctly structured.

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

Populate the input field with a value retrieved from an external URL without the need to submit

My scenario involves a webpage provided by the server that is accessed by around 20 different clients. The webpage consists of a simple form with a textbox displayed to each client, where they are expected to provide input using devices such as a keyboard, ...

Trigger Element Upon Click

Forgive me in advance for the lack of quality in this question, but I'll proceed anyway: All I want is for an element to slide open when clicked with a mouse! That's all! More specifically, I am looking for a single menu item that, upon clickin ...

"Discover the method to access values within an associative array or object in an Ember template by utilizing a

When working with Ember, the traditional syntax for looking up array values by key is to use the .[] syntax. For example: {{myArray.[0]}} However, I have encountered an issue when trying to perform a lookup on an associative array. Even though I have a s ...

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

PHP and Ajax Form Submission Directing to Backend PHP Script

While working on a portfolio, I encountered an issue with the contact form. When I click the submit button to send a message, instead of displaying the bootstrap alert message below the form, the page redirects to the PHP file. Although I receive the emai ...

Adjust the size of child divs in relation to their parent divs using jQuery

I am working with 4 divs and trying to adjust the size of the inner divs in relation to the parent divs dynamically. I have added a .top class, but I'm unsure if it is necessary or beneficial. Here is my fiddle for testing purposes: http://jsfiddle.n ...

ng-include not functioning properly within ng-table

In the table, there is a data structure <tr ng-repeat="question in $data" ng-include="'/views/partials/questionList.html'"></tr> Within the questionList.html file: <td class="top-td" data-title="'ID'" sortable="&ap ...

Tips for showing the chart title and subtitle using "vue-google-charts" library by devstark: Where to position them - top or bottom?

Utilizing the resource available at https://www.npmjs.com/package/vue-google-charts The title is not being displayed on the chart. Is there a way to show it either above or below the chart? I attempted adding "display=true" with the option "title" and fo ...

What is the purpose of using a class as a lambda function?

After referencing various online examples and tutorials, I managed to build my very first GraphQL API. However, I am curious as to the reasoning behind certain practices in Python. There is a particular class snippet that I find confusing: class UpdateRe ...

Basic setup of an embedded database in MongoDB

I am currently facing a dilemma as I try to establish the database structure for my Mongodb application using Mongoose/Node.js. I have two main entities, namely Users and Books, and due to the lack of joins in MongoDB, I need to decide on an embedded syste ...

Separating buttons (two buttons switching on and off simultaneously) and displaying the corresponding button based on the data

My current project involves creating a registration page for specific courses. While I am able to display the information correctly, I am facing an issue with the ng-repeat function. The problem lies in all the Register buttons toggling incorrectly. Additi ...

When the server reloads, an error occurs stating 'CodeMirror' is not defined when using CodeMirror with Vuejs/Nuxtjs

I've integrated CodeMirror into one of the textarea elements in my Nuxtjs/Vuejs application. I want to format the textarea to resemble XML. While the CodeMirror functions correctly at times, I encounter an error when reloading the page: Test.vue 33:1 ...

Accessing Next and Previous Elements Dynamically in TypeScript from a Dictionary or Array

I am new to Angular and currently working on an Angular 5 application. I have a task that involves retrieving the next or previous item from a dictionary (model) for navigation purposes. After researching several articles, I have devised the following solu ...

Implement an async function in NodeJS that utilizes Array.prototype.map() to efficiently save multiple files to various locations in a database while returning a single status code

Currently facing a bit of a dilemma on the best way to handle this situation. I've made the decision to revamp this controller, and it seems like incorporating promise.all() is the way to go. Situation: In our application, the Admin user needs to be ...

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

Guide to center align fields in Ionic and Angular

I am working on creating a login screen that resembles the image provided. I have managed to set the background image, input fields, and buttons successfully. However, I am encountering a few issues: The width of my input field is taking up the entire spa ...

Preventing file visibility in Three.js resource directory

Once a user clicks on a specific 3D model, I retrieve it from the server and render it in the browser using three.js. However, there is an issue when the user tries to access a model that is not free - they can easily view and download the STL file by go ...

Issue with Three.js: Geometry's BoundingBox is incorrect following a scaling operation

I am facing an issue with the bounding box of a cube in my scene. The cube is being manipulated by the user using THREE.TransformControls. After these interactions, I need to calculate the bounding box of the cube. var test = new THREE.Mesh(new THREE.Cube ...

Code snippet for calculating the size of an HTML page using JavaScript/jQuery

Does anyone know of a way to calculate and display the size/weight (in KB) of an HTML page, similar to what is done here: Page size: 403.86KB This would include all resources such as text, images, and scripts. I came across a Pelican plugin that does th ...

What are some best practices for implementing responsive design using CSS @media queries with makeStyles in React.js Material UI?

const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) } })); I ...