How do I pass in objectId from the react front end to server-side 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