Common way to handle errors in Graphql with hooks - react-hooks

Question

In the render props way of working with apollo graphql.. I used to be able to do this:
export const CsmartQuery = (({ children, isShowGenericErrorSnackBarForError, ...rest }) => (
<Query errorPolicy="all"
{...rest} >
{result =>
<GraphQLErrorHandler isShowGenericErrorSnackBarForError={isShowGenericErrorSnackBarForError}
result={result}>
{(transformedResult) => children(transformedResult)}
</GraphQLErrorHandler>
}
</Query>
))
My GraphQLErrorHandler, used to check the error, if its a server error (my generic catch all error), then I show an error snackbar to the user. I also process the error, strip out all the unwanted stuff and send only a code and a message to the children to work with. Here's the complete GraphQLErrorHandler component
import React from 'react';
import { showErrorSnackBarAction } from '../redux/appActions'
import { connect } from 'react-redux'
const transformError = (e) => {
if(e.networkError ||
((e.graphQLErrors || []).length === 0) ||
!e.graphQLErrors[0].extensions ||
e.graphQLErrors[0].extensions.code === 'SERVER_ERROR') {
return {
message: 'An error occurred while processing your request. Please try again',
code: 'SERVER_ERROR'
}
}
return {
message: e.graphQLErrors[0].message,
code: e.graphQLErrors[0].extensions.code,
}
};
const transformErrorsInResult = (result) => {
return {...result, error: result.error ? transformError(result.error) : undefined}
}
const GraphQLErrorHandler = ({result, isShowGenericErrorSnackBarForError, showErrorSnackBarAction, children}) => {
const [transformedResult, setTransformedResult] = React.useState(transformErrorsInResult(result))
React.useEffect(() => {
const newResult = transformErrorsInResult(result)
if(newResult.error && isShowGenericErrorSnackBarForError) {
showErrorSnackBarAction({message: newResult.error.message})
}
setTransformedResult(() => newResult)
}, [result, isShowGenericErrorSnackBarForError, showErrorSnackBarAction])
return (
children(transformedResult)
)
}
export default connect(null, { showErrorSnackBarAction })(GraphQLErrorHandler);
And I don't use Query from apollo and use the CsmartQuery component everywhere.
<CsmartQuery query={companyAddressQuery} variables={{ companyId: company.id }} isShowGenericErrorSnackBarForError>
{({ data, loading, error }) => {
if (error) return null
if (loading)
return (
<Container textAlign="center">
<Loader active />
</Container>
)
return <AddressDetailsWrapper companyAddresses={data.companyAddresses || []} company={company} {...rest} />
}}
</CsmartQuery>
How do I use the useQuery hook and be able to handle errors in a generic way? I would like the error to be transformed and a snackbar shown if needed. Preferably, in a way that I don't have to repeat code in every component.

Answer 1

This is what I landed up doing. Created a custom hook that wraps all apollo hooks
export const useCsmartQuery = (query, queryVariables, isShowGenericErrorSnackBarForError = true) => {
const queryResult = useQuery(query, queryVariables)
const { error } = queryResult
const dispatch = useDispatch()
if (error) {
const transformedError = transformError(error)
if (isShowGenericErrorSnackBarForError) {
dispatch(showErrorSnackBarAction({ message: transformedError.message }))
}
}
return queryResult
}
export const useCsmartMutation = (mutation, mutationData, isShowGenericErrorSnackBarForError = true) => {
const [callMutation, mutationResult] = useMutation(mutation, mutationData)
const { error } = mutationResult
const dispatch = useDispatch()
if (error) {
const transformedError = transformError(error)
if (isShowGenericErrorSnackBarForError) {
dispatch(showErrorSnackBarAction({ message: transformedError.message }))
}
return [callMutation, {...mutationResult, error: transformedError }]
}
return [callMutation, mutationResult]
}
Now use the custom hooks everywhere.