plrdev / react-native-flipper-apollo-devtools

33 stars 7 forks source link

Am I suppose to pass the ApolloClient imported from `@apollo-client` module? #13

Closed emadbaqeri closed 2 years ago

emadbaqeri commented 2 years ago

I'm trying to use this plugin in my code base like this:

import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import RNAsyncStorageFlipper from "rn-async-storage-flipper";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { enableFlipperApolloDevtools } from "react-native-flipper-apollo-devtools";

const App: React.FC = () => {
  RNAsyncStorageFlipper(AsyncStorage);
  enableFlipperApolloDevtools(ApolloClient);

  return (
    <ApolloProvider client={client}>
      <RecoilRoot>
        <NavigationContainer />
      </RecoilRoot>
    </ApolloProvider>
  );
};

export default App;

but typescript blames about it:

TS2345: Argument of type 'typeof ApolloClient' is not assignable to parameter of type 'ApolloDevClient<NormalizedCache | NormalizedCacheObject>'.   Type 'typeof ApolloClient' is missing the following properties from type 'Omit<ApolloClient<NormalizedCache | NormalizedCacheObject>, "__actionHookForDevTools">': query, link, cache, disableNetworkFetches, and 27 more.

What is the simple way of using this plugin? Any Ideas would be appreciated ;)

Yasir5247 commented 2 years ago
import { enableFlipperApolloDevtools } from "react-native-flipper-apollo-devtools";

export const client = new ApolloClient({
  cache,
  link: from([errorLink, authLink, retryLink, splitLink]),
  assumeImmutableResults: true,
  connectToDevTools: true,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
      errorPolicy: 'none',
    },
    query: {
      fetchPolicy: 'cache-first',
      errorPolicy: 'all',
    },
  },
});

enableFlipperApolloDevtools(client);