Query function returned by useLazyQuery does not throw error about apollo-client HOT 9 CLOSED

If this method would throw errors, none of our users could just call executeQuery() without additional error handling - they would get "uncaught Promise rejection" errors on the console.

You can check if the result contains an error property and act accordingly based on that.

That said, the useQuery hook is generally meant to synchronize with a React component, not with iterable code. Usually, you should be handling errors inside of your component's render function.

If you are looking for a way of making a query without having the results reflected in a component, you can call const client = useApolloClient() followed by client.query(...) to make a query directly without involving the React component cycle in this.

from apollo-client.

Thank you @phryneas for the clarification. How about other functions like refetch and fetchMore? Do I also need to check the error property instead of using catch block?

from apollo-client.

I think so, although the base advice for those is the same: If you're in a component, error handling should in most cases be done by the component itself, not by imperative handler code.

from apollo-client.

What do you mean by

error handling should in most cases be done by the component itself, not by imperative handler code.

In my case, I was implementing a button to execute the query whenever the button is pressed. And I am going to show an Alert when there is error with the query.

Before:
// Call this function when button is pressed
const handleGetData = async () => {
    try {
      const {data} = await getData();
      console.log('Success', data);
    } catch (error: any) {
      console.log('Error', error);
      Alert.alert('Error', error?.message);
    }
  };

After:
// Call this function when button is pressed
const handleGetData = async () => {
  const {data, error} = await getData();
      
  if (error) {
    Alert.alert('Error', error?.message);
    return;
  }
};

from apollo-client.

By that I mean that you could also have an Alert component that displays every time the error changes.

function Alert(error) {
  const [lastAcceptedError, acceptError] = useState(undefined)
  // either there has not been an error, or the user already acted on it, display nothing
  if (lastAcceptedError || lastAcceptedError == error) return null;

  return <div>these was an error <button onClick={() => acceptError(error)}>ok</button></div>
}

and then you use that in your component:

function MyComponent(){
  const result = useLazyQuery()

  return <>
    <Alert error={result.error} />
  // other normal content
  </>
}

There is usually no need to have any imperative code like this.

from apollo-client.

Oh thank you @phryneas.

Actually my Alert component is pretty complex, it allow me to custom the type of alert being shown (e.g the Alert background color will be yellow if type is warning). Because of that I decide to mount the Alert at the root of my project and utilize React's ref in children component to show or hide it.

So base on your advice then I should use React's useEffect to listen to the error and perform the ref call, right?

const {error} = useLazyQuery()

useEffect(() => {
  Alert.show({type: 'warning', message: error?.message})
}, [error])

from apollo-client.

If there's no way around that, yes, that's a valid way of doing so.

from apollo-client.

Thank you @phryneas. I'm closing this issue now.

from apollo-client.

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.

from apollo-client.