DEV Community

loading...

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

gurupal profile image Gurupal Singh ・1 min read

store.js

Alt Text

index.js

Alt Text

package.json

Alt Text

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);
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

List Products Action

Alt Text

Discussion (6)

pic
Editor guide
Collapse
jackmellis profile image
Jack • Edited

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...

Collapse
gurupal profile image
Gurupal Singh Author

got it .. thanks

Collapse
gurupal profile image
Gurupal Singh Author

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

Collapse
jackmellis profile image
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

Collapse
jackmellis profile image
Jack

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

Collapse
gurupal profile image
Gurupal Singh Author

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