Graphql Mutation with Array types

Question

I'm trying to write a mutation query and it works perfectly with graphql

mutation($project: ProjectsInput) {
  NewProject(project: $project) {
    name,
    namespace,
    environments{
      env,      
    }}}

these are the query variables

{"project": {
   "name": "Pr1",
  "namespace": "Pr2",
  "environments": 

  [{"env": "rec"},{"env": "dev"}]


}}

and this is how it looks graphql mutation now I am trying to use Apollo Client in angular to build this mutation like so


    createProject() {
    this.apollo.mutate({
      mutation: gql`
      mutation($project: ProjectsInput) {
        NewProject(project: $project) {
          name,
          namespace,
          environments{
            env,      
          }
    `,
      variables: { 
        project: {
          name: "sth",
          namespace: "sth2",
          env: [
            {env:"env1"},
            {env:"env2"}
          ]
        } 
      }
    }).subscribe(data => {
      console.log('New project created!', data);

    });  }

But i'm getting Http failure response because of the variable $env of type Array.i want to pass an array as a variable for the query in apollo client.I don't have problems with variables of type string but the array objects causes this error.

use graphiql docs to check mutation signature - probably ONE input variable - pass all data as one input object (matching one input variable), try with graphiql using `query variables` (below query) ... then use code (apollo-client) — xadm, Jun 03 '20 at 20:12
thank you for your reply, actually i tried with TWO input variables and it worked fine. The problem is that i'm stack with the array list type. i want to dynamically persist that array of objects. regards — maria, Jun 04 '20 at 08:57

xadm · Accepted Answer · 2020-06-05T13:17:00.213

2

NewProject(project: shows that your NewProject mutation needs one project parameter

change query to

mutation($project: ProjectsInput) {
  NewProject(project: $project) {
    name,
    namespace,
    environments{
      env,      
    }

and pass one, entire object to variable project

use query variables in graphiql to define test variables:

{ 
  project: {
    name: "sth",
    namespace: "sth2",
    environments: [
      {env:"env1"},
      {env:"env2"}
    ]
  } 
}

then in client prepare the same kind of object for project variable (with structure matching your mutation input type, of course).

edited Jun 05 '20 at 13:17

answered Jun 04 '20 at 09:28

xadm

8,219
3
14
25

Thank you sir but that's not the problem.The query works fine. The problem is that the size of the array 'env' is not static (a project has many environments fixed by the admin) . string variables does not cause a problem. in this case when i remove $env variable from apollo request it works fine but when i add the array i get an error. – maria Jun 04 '20 at 10:49
show your mutation signature - from graphiql ... and input types definitions used in this mutation – xadm Jun 04 '20 at 11:41
i have edited the post. what i want to do is to add an array of objects to the apollo client request.regards – maria Jun 04 '20 at 12:16
nothing changed .... only we know input type name ;) `ProjectsInput`, still prepare ONE object, try first in graphiql (using query variables!! not hardcoding structures and passing subproperties ), then recreate in code – xadm Jun 04 '20 at 12:21
i did what you have told me and i edited once again the post. i'm using query variables now like in the picture(edited in the post). the problem is actually not in the backend Api but in the apollo client request. i hope i'm understanding what you are trying to tell me. thanks – maria Jun 04 '20 at 12:55
just try to create some `project` object (with all required subproperties) from code before passing it as project to variables ... sadly it's angular ;) – xadm Jun 04 '20 at 14:08
i'm getting this error "Syntax Error: Expected Name, found " – maria Jun 05 '20 at 13:05
you can try to prepare entire `variables` object, `console.log()` it before passing to mutation ... you can also inspect network request body using browser dev tools – xadm Jun 05 '20 at 13:10
... because it's name is `environments` ? .... `"namespace":"sth2", >>>"environments" <<< :[{"env":"env1"}` – xadm Jun 05 '20 at 13:16

Graphql Mutation with Array types

1 Answers1