CODEWITHSUNDEEP
reactjsreact-hooks
pmiranda
pmiranda

Reputation: 8440

invariant violation, invalid hook call, useApolloClient

I'm getting this error in React Native:

"Invariant Violation: Invalid hook call. Hoks can only be called inside of the body of a function component. etc"

My code (simplified) is this:

import { useApolloClient } from '@apollo/react-hooks';
// code

const handleRedirectCalculator = React.useCallback(() => {
    const client = useApolloClient();
    client.clearStore();
    navigation.push('CurrencyConverter');
}, []);

return (
<View>
  <MessageErrorButton
      message='El tiempo de tu cotización a caducado'
      onPress={() => handleRedirectCalculator()}
  />

What I want is to get use the useApollo hook to get the client then use the clearStore on the client. How can I fix my code?

Upvotes: 0

Views: 323

Answers (2)

pmiranda
pmiranda

Reputation: 8440

Ok, I fix by removing the call o the hook outside:

import { useApolloClient } from '@apollo/react-hooks';
// code

const client = useApolloClient();

const handleRedirectCalculator = React.useCallback(() => {
    client.clearStore();
    navigation.push('CurrencyConverter');
}, []);

return (
<View>
  <MessageErrorButton
      message='El tiempo de tu cotización a caducado'
      onPress={() => handleRedirectCalculator()}
  />

Upvotes: 0

Menawer
Menawer

Reputation: 883

Thats because as stated in React Rules of Hooks you can't have hooks inside nested functions, useApollo is a hook itself, so you have to take it out and approach your problem differently

Upvotes: 1

Related Questions