Question

我有一个具有Formik表单的react应用程序，用于收集用户输入，然后我想使用graphql将其发布回图形数据库。

到目前为止，我已经创建了Formik表单并收集了状态下的输入（包括将图像上传到Google Cloud存储并返回图像的云URL）：

这一切都很好，我可以在控制台中返回用户的每个输入：

我已经使用以下功能实现了这一点：

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);
            });
    }

使用阿波罗服务器将数据写回到图形数据库时遇到困难。

我一直在尝试使用useMutation将数据写回到图形数据库。我将突变设置如下：

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
  }
}
`

我希望它将像将我的CREATE_EVENT突变传递到useMutation钩子然后在CreateMem函数中按如下所示调用它那样简单：

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)
    })
}

但是，这将引发无效的挂接调用。我一直在阅读文档here，无法弄清自己在做什么。

React.js：使用useCallback钩子和graphql

0 个答案: