Issue with variable type in Graphql query using Apollo client

When attempting to run a delete query that requires an ID, I encountered an error stating: "Variable "$id" of required type "ID!" was not provided"

The Query:

export const DELETE_CUSTOMER = gql`
    mutation deleteCustomer($id:ID!){
        deleteCustomer(
            _id: $id
        )
    }
`

The Mutation code within vuex actions:

deleteCustomer(vuexContext, id){
        return apollo
        .mutate({
            mutation: DELETE_CUSTOMER,
            variables: id.toString()
        })      
        .then(()=>{
            vuexContext.commit('deleteCustomer', id.toString());
        })
        .catch((err) => {
            throw err;
        });

    }

Answer №1

When using the variables option, it is important to note that it should be formatted as an Object where each property corresponds to a specific variable referenced in your query. Simply assigning the value of a variable directly to variables will not work as intended. To correct this, your method call should resemble the following:

apollo.mutate({
  mutation: DELETE_CUSTOMER,
  variables: { id: id.toString() },
})

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 the inability to run php code within html files?

Struggling with a stubborn issue that has left me feeling stuck for days. I'm attempting to execute a php script, involving mysql database access, from an html file using javascript. However, each time I run the code in NetBeans, it throws an unspecif ...

When both ng-mouseover and ng-mouseleave are triggered simultaneously

My goal is to toggle the visibility of an image tag. When the mouse hovers over it, the image should disappear and when the mouse moves away, the image should reappear. Here's what I've attempted: <img ng-mouseover="active = true" ng-mousele ...

Currently Engaged in Seeking Out a Specific Phrase and Substituting it

Input fields are situated on one side of the page and their content is then displayed in organized boxes on the other side. I am looking to search for a specific string, 'key', within the input fields and replace it with a predefined value stored ...

The numbers on my keypad do not show up when I press them in the password field

I've been working on exercises from the book "building-cross-platform-mobile-pawan-lingras" and I'm facing an issue where the numeric keypad does not always display the value in the text box when clicked. I have already connected the HTML file w ...

javascript: update hidden field if date is past January 15th

Having a bit of trouble with this one after a full day! The form contains a hidden field called 'grant_cycle'. If the form is submitted after January 15th, it should have the value 'Spring, [year]', or if after July 15th, it should be ...

Exporting the default object scope in Vue.js allows for easy sharing

Could someone please clarify the usage of export default in Vue files? Appreciate it. For example: HelloWorld.vue <template> <div id="app"> <HelloWorld /> </div> </template> <script> import HelloWor ...

Click the button to send the form without including any hidden HTML element array value

My main goal is to create a dynamic dropdown menu for users when they click a button. Each click triggers a new dropdown to appear. To achieve this, I have been cloning a hidden div each time the button is clicked. Here's an example of how I am accom ...

Certain JavaScript code might fail to load on WordPress

I've been struggling to troubleshoot an issue with a JavaScript accordion menu on my WordPress site. When I try to click the accordion button, it doesn't reveal the hidden content beneath it. I've attempted various solutions, but none have s ...

Angular is not defined upon the initial page load

When loading for the first time, Angular is undefined. However, upon refreshing the page for the second time, it works fine. It could possibly be due to JavaScript loading issues. Please take a look at: requirejs([ "js/jquery-1.11.3.min", "js/ang ...

Display a hidden div only when a cookie is set during the initial visit

I'm currently facing an issue while trying to set multiple cookies based on the existence of a div using JavaScript. On the first visit, I want to display the div to the user if it exists, then set a cookie (named redCookie) that expires in 3 days. Up ...

Adjusting the brightness of colors using JavaScript

I am looking for a way to return different color tones for a specific color using JavaScript. For example, if I have the color code #4a4a4a, I want to be able to return #494949 and #666464. If there is a package or method that can achieve this, please sugg ...

Ways to invoke a jQuery plugin method from outside the plugin script

I have the following script code (function($) { $.fn.youamaAjaxLogin = function(options) { function start() { //start } .... Is there a way to call the start() function from outside? (func ...

After refreshing the page, the Redux action fails to dispatch

Having some trouble with redux and possibly useEffect (not sure where the mistake lies). I'm attempting to fetch data from PokeAPI and store it in the redux state. The issue is that the data retrieved about pokemons does not include their types (fire, ...

Creating a like button using AJAX in Django

Is there a way to implement a like button in Django using ajax without the need for a page reload? I've tried setting up my HTML and Ajax function, but it's not working properly. <form method="POST" action="{% url 'video: ...

Transforming conversion code snippet from jQuery to Dojo - utilizing AJAX techniques

I am in the process of converting my code from jQuery to Dojo. I just need an equivalent snippet that works. The jQuery code is functioning properly, but the Dojo code is not working as expected. JQUERY <script type="text/javascript"> $(docume ...

How can I convert a Java array of arrays into JavaScript?

When working with Java, I need to create a JSON structure similar to this: [ [ timestamp , number ],[ timestamp , number ] ] This structure is necessary for displaying data on Highcharts graphs. I initially used a "LinkedList of LinkedList" format to ...

Getting an error when trying to call a C# method from JavaScript

Recently, I have been attempting to execute a C# method from JavaScript within my ASP.NET page named parameters.aspx. However, each time I hit the button to trigger the method, an error 404 is displayed. Let's take a look at the C# method defined in ...

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

While working on my Ionic project, I encountered an error in Angular when trying to fetch data from an API using HttpClient. The error message that popped up was 'Property 'name' does not exist on type '{}'.'. Below is the cod ...

The email address in React-Redux firebase seems to be incorrectly formatted

I've encountered an issue when trying to log a user in. The email address format seems to be incorrect. Oddly enough, I have no trouble signing up. Here's a demo that appears to be functional, but doesn't actually sign users in: https: ...

Generating a header each time a table is printed across multiple pages

A table has been created in a webform using C#. The goal is to only print the table when the user clicks the print button on the webform. Javascript has been implemented in ASP.NET to only print the content within a specific div. While this method works, ...