React useMutation 没有传递正确的参数输入

Question

我正在尝试在一个项目中执行 Mutation，我将 Appollo GraphQL 作为中间件，将 reactJS 作为前端。

我有以下架构（想法是发送联系表格）：

input entryIntput {
        url_title: String!
        title: String!
        channel_id: Int!
        entry_date: String!
        name: String!,
        motivation: String!
        mail: String!
        job_position: String
    }
...
type Mutation {
        createEntry(input: entryIntput): postEntrySuccess
    }

解析器：

  Mutation: {
    createEntry: (_, { input }) => channelEntriesService.postEntry(input)
  }

ChannelEntriesService：

    url_title: 'Application Form Entry-',
    title: 'Application Form Entry #',
    entry_date: Date.now(),
    channel_id: 3
  }) {
    const auth = await authenticate.auth()
    const nextEntry = await this.getNextEntry();

    const patch = {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      url: `${this._options.url}/create_channel_entry`,
      data: `channel_id=${entry.channel_id}&url_title=${entry.url_title}${nextEntry}&title=${entry.title} ${nextEntry}&name=${entry.name}&motivation=${entry.motivation}&job_position=${entry.job_position}&mail=${entry.mail}&entry_date=${entry.entry_date}&session_id=${auth.session_id}`
    }

    const response = await axios(patch);

    return response.data;
  }

我通过useMutation 执行队列并声明如下：

    const APPLY = gql`
      mutation PostEntry($input: entryIntput) {
        createEntry(input: $input) {
          entry_id
        }
      }
    `;
....
  const [createEntry, { error: formError, loading: formLoading }] = useMutation(APPLY);

在前端，我正在使用 React-Hook-Form：

  const onSubmit = (applicantData) =>
    createEntry({
      variables: {
        url_title: applicantData?.name?.trim(),
        entry_date: Date.now(),
        title: applicantData?.name,
        ...applicantData,
      },
    });

当我执行提交时，我的 channelEntries 中的 entry 参数有 undefined .postEntry(),

While I execute it through a mutation from the apollo studio like: 
mutation applicationEntryForm($entryInput: entryIntput) {
  createEntry(input: $entryInput) {
    entry_id
  }
}

query_variables: 
{
  "entryInput": {
    "channel_id": 3,
    "url_title": "my First Entry input",
    "entry_date": "1623829177995",
    "title": "Voila intruder!",
    "name": "Vlad",
    "job_position": "cleaner",
    "motivation": "My motivation notes",
    "mail": "vlado@vlado1.com"
  }
}

它具有正确的参数并且成功创建了一个条目。 我在前端“useMutation”和需要传递变量的提交函数中做错了什么？

我认为你提前阅读了这篇文章并给了我一些提示，因为我真的很累:(

Answer 1

在将一些变量重命名为@xadm 后，我发现了以下内容：

我用的时候有区别：

  const [createEntry, { error: formError, loading: formLoading }] = useMutation(APPLY);

和

  const [createEntry, { error: formError, loading: formLoading }] = useMutation(APPLY, {});

例如为 options 参数传递一个空对象实际上会使事情发生。