Mutation Error on graphql query

Get Help and Help Others
1

Please bear with me i am still a noob in react

I have simple graphql query to update an object
const UPDATE_WORKFLOW_MUTATION = gql mutation UpdateWorkflowMutation($id: Int!, $input: UpdateWorkflowInput!) { updateWorkflow(id: $id, input: $input) { id } }
const workflow = {
title: data.workflow.title,
description: data.workflow.description,
xml: xml,
}

const id = data.workflow.id
console.log(workflow)

updateWorkflow({ variables: { id, workflow } })

keeps returning error:
{“errors”:[{“message”:“Variable “$input” of required type “UpdateWorkflowInput!” was not provided.”,“locations”:[{“line”:1,“column”:44}],“extensions”:{“code”:“INTERNAL_SERVER_ERROR”,“exception”:{“stacktrace”:[“GraphQLError: Variable “$input” of required type “UpdateWorkflowInput!” was not provided.”," at _loop (C:\reactapp\kpims\node_modules\graphql\execution\values.js:92:17)"," at coerceVariableValues (C:\reactapp\kpims\node_modules\graphql\execution\values.js:119:16)"," at getVariableValues (C:\reactapp\kpims\node_modules\graphql\execution\values.js:48:19)"," at buildExecutionContext (C:\reactapp\kpims\node_modules\graphql\execution\execute.js:184:61)"," at executeImpl (C:\reactapp\kpims\node_modules\graphql\execution\execute.js:89:20)"," at Object.execute (C:\reactapp\kpims\node_modules\graphql\execution\execute.js:64:35)"," at C:\reactapp\kpims\node_modules\apollo-server-core\src\requestPipeline.ts:548:22"," at Generator.next ()"," at C:\reactapp\kpims\node_modules\apollo-server-core\dist\requestPipeline.js:8:71"," at new Promise ()"]}}}]}

2

:wave: hi @khatyan. no worries – let’s see if we can help.

It’s tough to see without some context.

Do you have a GitHub repo that you can share so can see:

  • schema
  • sdl
  • where this mutation is being called (is it in a Cell in Success and onSave? does data come from a Form via onSubmit?)
  • are you testing in http://localhost:8911/graphql ?

Also one little tip. If you use three “backticks” → ` then to start a block and then three more to end:

formatted code goes here

it is easier to read.

3 
import ReactBpmnModel from 'src/components/ReactBpmnModel'
import KpimsLayout from 'src/layouts/KpimsLayout'
import { useQuery, useMutation } from '@redwoodjs/web'

export const QUERY = gql`
  query FIND_WORKFLOW_BY_ID($id: Int!) {
    workflow: workflow(id: $id) {
      id
      title
      description
      xml
    }
  }
`
const UPDATE_WORKFLOW_MUTATION = gql`
  mutation UpdateWorkflowMutation($id: Int!, $input: UpdateWorkflowInput!) {
    updateWorkflow(id: $id, input: $input) {
      id
    }
  }
`
const WorkflowBpmnPage = () => {
  const [updateWorkflow, { loadingwf, errorwf }] = useMutation(
    UPDATE_WORKFLOW_MUTATION,
    {
      onCompleted: () => {
        //addMessage('Workflow updated.', { classes: 'rw-flash-success' })
      },
    }
  )

  const { loading, error, data } = useQuery(QUERY, {
    variables: { id: 1 },
  })
  //console.log(data, 'XML')
  function onShown() {
    console.log('diagram shown', data)
  }

  function onLoading() {
    console.log('diagram loading')
  }

  function onError(err) {
    console.log('failed to show diagram')
  }
  function onSave(xml) {
    const UpdateWorkflowInput = {
      UpdateWorkflowInput: {
        title: data.workflow.title,
        description: data.workflow.description,
        xml: xml,
      },
    }
    const workflow = {
      title: data.workflow.title,
      description: data.workflow.description,
      xml: xml,
    }

    const id = data.workflow.id
    console.log(workflow)
    updateWorkflow({ variables: { id, UpdateWorkflowInput } })
  }
  if (data) {
    return (
      <>
        <KpimsLayout>
          <div className="canvas" id="js-canvas">
            <ReactBpmnModel
              url="/public/diagram.bpmn"
              onShown={onShown}
              onLoading={onLoading}
              onSave={onSave}
              onError={onError}
              diagramXML={data.workflow.xml}
            />
          </div>
        </KpimsLayout>
      </>
    )
  } else {
    return (
      <>
        <KpimsLayout>
          <div className="canvas" id="js-canvas">
            <ReactBpmnModel
              url="/public/diagram.bpmn"
              onShown={onShown}
              onLoading={onLoading}
              onSave={onSave}
              onError={onError}
            />
          </div>
        </KpimsLayout>
      </>
    )
  }
}

export default WorkflowBpmnPage
4

Same query is working fine from graphql interface 8011 port.

5

Sorry my bad, the json must be with input


input:{
title: ""
description:""
xml:""
}
6

Sorry @khatyan, I find this hard to follow - are you combining Cell and Page behavior together?

Is there a reason not to use the RedwoodJS Cell pattern for mutations?

7

To tell you the truth i still don’t know how? So kind a cutting corners. What I am working on currently is using redwood to create a POC for a KPI Management System with fully functional workflow Engine. Yesterday my main problem was the connectivity of redwood to BPMN.IO library so created a react hook to BPMN.IO Modeller and using redwood generated Cell to update the xml. There were few hitches here and there and but i am getting to it.
Thanks for all your support.

8

Glad to hear! :clap:

Curious - where are you saving the diagram/workflow xml as part of the gql mutation update? In a database field?

9

Since i am still in the baby steps of redwood and react yes i am saving it in a database field


model Workflow {

  id          Int              @id @default(autoincrement())

  title       String           @unique

  description String

  xml         String

  Statuses    WorkflowStatus[]

}
10

if you are still in a generous mood and would like to help a noob out, I have all these cells lying around right of these cells is WorkflowCell, what if i want to reuse this cell in another cell how would i go on doing that without having to render that cell.

11

Thanks. I was wondering because I had read that Prisma sets strings to be limited to 191 characters.

But now that I look at the SQL Prisma generates, it is using a TEXT so the XML could fit – I guess Prisma has updated that since (or use of native types addressed it) the issue was raised (which is nice).