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

Question

So I am trying to call a graphql mutation with the useMutation hook and it is supposed to store a new record with a objectId reference to another collection in my 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();
  }

the mutation is this snippet below and I have tested it on the playground to verify the server-side code is setup and running properly.

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

Everytime I execute the handlesubmit (button event handler) with my react front-end, I keep getting a 400 http://localhost:3000/graphql 400 (Bad Request) so I figured it might have to do with how I am passing in the id reference for the referenced collection. Does anyone have a better approach on how it should be handled from the front end? (Im aware its hardcoded for now for testing purposes.)

Answer 1

Check.network tab to see the contents of the error. Also see if you have trailing forward slash in Apollo Client createHttpLink URI parameter.

It should be like this

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

Lastly you might need cors in place on the backend, but firstly check.network tab to see what you're getting from server

Answer 2

The mutation expects two variables named ticketOwner and venue .

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

While the variable passed is only ticket .

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

To fix, properly pass the variables based on what the mutation expects.

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