I am currently working on a project in which GraphQL is being implemented for the first time and initially I only had to run GraphQL mutations within the component(using Apollo-client and it’s hook – useMutation) that I was working on and all was well.

Now, I am trying to have the mutation in the action file, so that any component or container can use it. I am trying three different kinds of implementations. All three are working in my local system. But, once they are deployed and I am testing them in live version, none of them seem to be working right.

See code given below:

Client definition:

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([
    new HttpLink({ uri: config.urls.THE_URL }),
    onError(({ graphQLErrors, networkError }) => {
      alert('network Error');
      if (networkError) {
        console.log(`[Network error]: ${networkError}`);
      }

      if (graphQLErrors) {
        alert('graphQL Error');
        graphQLErrors.forEach(({ message, locations, path }) =>

          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
          )
        );
      }
    })
  ]),
});

simple function using client.mutate

export function editOrCreateMutation(payloadData) {
  try {
    console.log("Inside mutate try")
    client.mutate({
      mutation: EDIT_OR_CREATE,
      variables: payloadData.variables
    })
      .then(
        (response) => console.log("Response in client mutate:", response),
        (reject) => console.log("Reject in client mutate:", reject)
      )
      .catch((err) => console.error(err));
  } catch (error) {
    console.log("Reducer GraphQL mutate error: ", error)
  }
}

async function using client.mutate

export function editOrCreateMutationAsync(payloadData) {
  return async () => {
    try {
      console.log("Inside async mutate try")
      const result = await client.mutate({
        mutation: EDIT_OR_CREATE,
        variables: payloadData.variables
      })
        .then(
          (response) => console.log("Response in async client mutate:", response),
          (reject) => console.log("Reject in async client mutate:", reject)
        )
        .catch((err) => console.error(err));
    } catch (error) {
      console.log("Reducer GraphQL async mutate error: ", error)
    }
  }
}

mutation using fetch

export function editOrCreateUsingFetch(payloadData) {
  const plainQuery = `
  mutation EditOrCreate(
    $input: UpdateInput!
  ) {
    update(
      input: $input
    ) {
      data_point_1
      data_point_2
      data_point_3
    }
  }`;
  try {
    console.log("Inside fetch try")
    fetch(
      config.urls.THE_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        query: plainQuery,
        variables: payloadData.variables
      })
    }
    )
      .then(
        response => console.log("Response from mutation fetch: ", response),
        reject => console.log("Reject from mutation fetch: ", reject)
      )
      .then(
        data => console.log("Data from mutation fetch success: ", data),
        data => console.log("Data from mutation fetch failure: ", data)
      )
      .catch((err) => console.error(err))
  } catch (error) {
    console.log("Reducer GraphQL Fetch error: ", error)
  }
}

All of them are working in my local system. But, in the deployed live version, it is not working. I am getting the following logs in the deployed version.

response logs – 1

response logs – 2

I am getting a 201 response code for all three of them, even though I am getting a 200 response code in local.

Why is this happening? What am I doing wrong? Please help.

Also, please let me know if there is a more efficient way to solve this problem.