Invalid hook call. Hooks can only be called inside of the body of a function component. ??

store.js

index.js

package.json

import "../styles/style.scss";
import store from "@config/store";
import { Provider } from "react-redux";
import NetworkDetector from "@config/network";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "@config/apolloClient";

function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    <ApolloProvider client={apolloClient}>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </ApolloProvider>
  );
}

export default NetworkDetector(App);

Why i am getting this Invalid hook call in redux dev tools. Am i doing something wrong here ?

List Products Action

Comments

[Jack]

So you've got a useQuery (a react hook) inside a function that is only called inside a use effect callback. That's your problem. All react hooks must be called at the top level of the render function.

I don't know enough about your app to understand your setup but it feels weird that you're mixing apollo client with redux...

[Gurupal Singh]

got it .. thanks

[Gurupal Singh]

can i query graphql direct with axios and remove apollo client ?

[Jack]

Itd be very difficult to query graphql without some dedicated library but apollo client is an entire state management system so is overkill for what you need
There are several graphql libraries like npmjs.com/package/graphql-request

[Jack]

Looks like your list products function is doing something, but you haven't listed it here...

[Gurupal Singh]

updated the question. I have added the list product actions in which i am using useQuery to get data from graphql