Using `Create` mutation with GRANDstack application

[mckenzma]

I am working to implement the Create autogenerated mutation within my GRANDstack application, but am getting hung up. When I use the following in the GraphQL playground, I am able to create and add to my graph as needed:

mutation {
  CreatePerson (
    firstName:"Mike"
    lastName:"McKenzie"
  ){
    firstName
    lastName
  }
}

However, when attempting to implement this into the GRANDstack Query tag I am getting an error. This is how I am attempting to use the mutation within the Query tag:

<Query
        query={gql`
          mutation {
            CreatePerson(firstName: "Mike", lastName: "McKenzie") {
              firstName
              lastName
            }
          }
        `}
      >

This is a shot of the error message I get:

Thank you in advance for your help.

[david_allen]

Paging @William_Lyon here, but I have a thought -- I can't give you any advice or help on why Query would not do a mutation, but in my opinion it's not a good idea to take this approach.

When you use a <Query> component, that's typically going to be done in a React render() method. That's maybe not a great idea because render is going to get called a lot, and depending on UI state you usually don't want to hit the same mutating query over and over again.

I think you instead might want to consider component lifecycle and figure, do you want to do the mutation when a button gets clicked? On component mount? Sometime else?

Then I'd probably run my query using the useQuery approach like this: https://github.com/grand-stack/grand-stack-starter/blob/master/ui/src/UserList.js#L66

[mckenzma]

The idea would be for a user to enter text into multiple fields and or have some selections that would get submitted upon a button click. I could see setting the button click to pass the variables to a query component that would create the node. This is my first attempt and creating and/or updating via GraphQL so this is a brand new world.

[david_allen]

I'd consider wiring a button to callback function, have the callback function execute the mutation. Don't use a Query component for that....basically the callback function can get status of the query (pending, errored, completed, etc) and then the actual UI components simply display that state. In general with React it's good practice to separate the logic (running a mutation query) from the UI display.

There are some small simple cases where they can be combined if all you're doing is running a simple read query and showing the results to the user, and I suspect that's what the Query component is for.

Also have fun with playing with it....I enjoyed it, but new stacks are of course a whole lot to learn all at once. 😉