Bryntum Gantt and React + Apollo GraphQL

App.js

import { BryntumGantt } from '@bryntum/gantt-react'
import useGanttConfig from './GanttConfig'
import './App.scss'

const App = () => {
  const ganttConfig = useGanttConfig()

  return (
    <>
      <BryntumGantt {...ganttConfig} />
    </>
  )
}

export default App

GanttConfig.js

import { gql, useMutation } from '@apollo/client'
import { useEffect, useState } from 'react'

const useGanttConfig = () => {
  const [dependencies, setDependencies] = useState([])
  const [tasks, setTasks] = useState([])
  
  useEffect(() => {
    const getSchedule = async () => {
      const response = await fetch(process.env.REACT_APP_GRAPHQL_SERVER, {
        method: 'POST',
        headers: new Headers({
          'content-type': 'application/json',
        }),
        body: JSON.stringify({
          query: `
            query TaskQuery {
              dependencies {
                fromTask
                toTask
                id
              }
              tasks {
                percentDone
                durationUnit
                startDate
                duration
                name
                id
              }
            }`,
        }),
      })

      if (response.ok) {
        const { data } = await response.json()
        const { dependencies, tasks } = data

        setDependencies(dependencies)
        setTasks(tasks)
      }
    }

    if (dependencies.length === 0 && tasks.length === 0) {
      getSchedule()
    }
  }, [dependencies, tasks])

  const [updateTask] = useMutation(gql`
    mutation UpdateTask(
      $id: Int
      $name: String
      $duration: Int
      $percentDone: Int
    ) {
      updateTask(
        id: $id
        name: $name
        duration: $duration
        percentDone: $percentDone
      )
    }
  `)

  return {
    tasks,
    dependencies,
    barMargin: 10,
    viewPreset: 'hourAndDay',
    onDataChange: ({ action, records }) => {
      if (action === 'update') {
        const { name, duration, id, percentDone } = records[0]

        if (
          typeof percentDone !== 'undefined' &&
          typeof duration !== 'undefined' &&
          typeof name !== 'undefined' &&
          typeof id !== 'undefined'
        ) {
          updateTask({
            variables: { name, duration, id, percentDone },
            onCompleted: (data) => {
              const { updateTask } = data

              console.log(updateTask ? 'Task updated' : 'Task not updated')
            },
          })
        }
      }
    },
  }
}

export default useGanttConfig

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
import App from './App'

const client = new ApolloClient({
  uri: process.env.REACT_APP_GRAPHQL_SERVER,
  cache: new InMemoryCache(),
})

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('container'),
)