how to handle mutation error on apollo client? - reactjs

Question

I'm trying to solve how handle throwed apollo-server mutation error on apollo client side.
This is my simplified implementation of mutation (createCustomer):
Mutation: {
createCustomer: async (_, { photoFile, customer }) => {
const rootPath = path.resolve("./public");
const customerPath = path.join(rootPath, "/photos/customers");
try {
const {
dataValues: { customerID, firstname, lastname, email, phone }
} = await models.Customer.create(customer);
const customerUniqueDir = path.join(customerPath,
`${customerID}`);
} catch (createCustomerError) {
// throw new apollo-server error
throw new UserInputError();
}
}
}
on client side I get following error:
(first not red error is just console.log in catch block on client)
This error is thrown by apollo-link:
here is the response from server:
Here is the implementation of apollo-client:
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { ErrorLink } from "apollo-link-error";
import { withClientState } from "apollo-link-state";
import { createUploadLink } from "apollo-upload-client";
import { ApolloProvider } from "react-apollo";
import { InMemoryCache } from "apollo-cache-inmemory";
import App from "./App";
const cache = new InMemoryCache({
addTypename: false
});
const stateLink = withClientState({
cache,
resolvers: {
Mutation: {}
},
defaults: {
customers: { customers: [], count: 0 }
}
});
const uploadLink = createUploadLink({ uri: "http://localhost:8000/graphql" });
const errorLink = new ErrorLink();
const client = new ApolloClient({
link: ApolloLink.from([stateLink, errorLink, uploadLink]),
cache,
connectToDevTools: true
});
ReactDOM.render(
<BrowserRouter>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</BrowserRouter>,
document.getElementById("root")
);
Is there any solution how could I handle mutation error on client ?
Thanks for answer

Answer 1

Solution:
The error appeared in apollo-link. So I looked into my implementation of graphql-client and I realized that I forgot to use apollo-link-http module.
So I added following lines of code:
import { HttpLink } from "apollo-link-http";
const httpLink = new HttpLink({ uri: "http://localhost:8000/graphql" });
const client = new ApolloClient({
link: ApolloLink.from([stateLink,errorLink, httpLink, uploadLink]),
cache,
connectToDevTools: true
});