React. js: отправка данных формы в базу данных графов с помощью ловушки useCallback и graphql - PullRequest
Новая
       182

React. js: отправка данных формы в базу данных графов с помощью ловушки useCallback и graphql

0 голосов
/ 06 августа 2020

У меня есть приложение для реагирования, в котором есть форма Formik, в которой я собираю вводимые пользователем данные, которые затем хочу отправить обратно в базу данных графов с помощью graphql. входы в состоянии (включая загрузку изображения в хранилище Google Cloud и возврат URL-адреса облака изображения):

enter image description here

This all works nicely and I can return each of the user's inputs in the console:

enter image description here

I have achieved this using the following function:

function CreateMem(file, values) {
        const formData = new FormData();
        formData.append('file', file);

        fetch(`${window.location.protocol}//${window.location.hostname}:9001/uploads`, {
            method: 'POST',
            mode: 'cors',
            cache: 'no-cache',
            body: formData
        })
            .then((response) => response.json())
            .then((response) => console.log('Image URL is: ' + response.data))
            .then(console.log('Type is: ' + values.memType))
            .then(console.log('Name is: ' + values.memName))
            .then(console.log('Date is: ' + values.memDate))
            .then(console.log('Favourite is: ' + values.favourite))
            .then(console.log('Public is: ' + values.broadcast))

            .catch(error => {
                console.error('There has been a problem uploading your image', error);
            });
    }

I'm having difficulty with writing this data back to my graph database using apollo server.

I have been attempting to use useMutation to write the data back to the graph database. I have the mutation set up as follows:

export const CREATE_EVENT = gql`
mutation(
  $eventID: ID
  $name: String
  $date: _Neo4jDateInput
  $image: String
  $favourite: Boolean
  $broadcast: Boolean
) {
  CreateEvent(
    eventID: $eventID
    name: $name
    date: $date
    image: $image
    favourite: $favourite
    public: $broadcast
  ) {
    eventID
    name
    date {
      day
      month
      year
    }
    image
    favourite
    public
  }
}
`

I was hoping it would then be as simple as passing my CREATE_EVENT mutation to the useMutation hook and then calling it within the CreateMem function as follows:

function CreateMem(file, values) {
  const [CreateEvent, { data }] = useMutation(CREATE_EVENT);

  const formData = new FormData()
  const eventID = Math.floor(Math.random() * 1000000000000) + 1
  formData.append('file', file)

  fetch(
    `${window.location.protocol}//${window.location.hostname}:9001/uploads`,
    {
      method: 'POST',
      mode: 'cors',
      cache: 'no-cache',
      body: formData,
    }
  )
    .then((response) => response.json())
    .then((response) =>
      CreateEvent({ variables: { eventID: eventID, name: values.eventName, date: null, image: response.data, favourite: values.favourite, public: values.broadcast } })
    )

    .catch((error) => {
      console.error('There has been a problem uploading your image', error)
    })
}

However, this throws up an invalid hook call. I've been reading the documentation здесь и не могу понять, что я ' м делаю неправильно.

...