如何将反应前端的objectId传给服务端graphql？

Question

所以我试图用 useMutation 挂钩调用 graphql 突变，它应该存储一条新记录，其中 objectId 引用到我的 mongodb 中的另一个集合。

const handleSubmit = async (e) => {
    e.preventDefault();
    const ticket = {
      ticketOwner: "60bd776e3e088a27ecae9dbb",
      venue: "Chase Center" 
    };
    console.log(ticket);
    try {
    await createTicket({variables: {ticket}});
    } catch (e) {
      console.log(e);
    }
    handleClose();
  }

突变是下面的这个片段，我已经在操场上对其进行了测试，以验证服务器端代码是否已正确设置和运行。

export const CREATE_TICKET = gql`
    mutation ($ticketOwner: ID!, $venue: String!) {
        createTicket(ticketOwner: $ticketOwner, venue: $venue) {
_id
venue}}`;

每次我用我的反应前端执行 handlesubmit（按钮事件处理程序）时，我不断收到 400 http://localhost:3000/graphql 400 (Bad Request)所以我认为这可能与我传递的方式有关引用集合的 ID 引用。 有没有人对如何从前端处理它有更好的方法？ （我知道现在出于测试目的对其进行了硬编码。）

Answer 1

检查.network 选项卡以查看错误内容。 另请查看 Apollo Client createHttpLink URI 参数中是否有尾部正斜杠。

应该是这样的

const httpLink = createHttpLink({
  uri: "http://localhost:5000/graphql",
});

最后，您可能需要在后端放置cors ，但首先检查网络选项卡以查看您从服务器获得的内容

Answer 2

突变需要两个名为ticketOwner和venue的变量。

mutation ($ticketOwner: ID!, $venue: String!)

而传递的变量只是ticket 。

await createTicket({variables: {ticket}});

要修复，请根据突变的预期正确传递变量。

await createTicket({
  variables: {
    ticketOwner: ticket.ticketOwner,
    venue: ticket.venue
  }
});