profile
viewpoint

Ask questions"Invalid hook call." error while using `Query` or `useQuery` with react-apollo 3

<!-- Thanks for filing an issue on React Apollo!

Please make sure that you include the following information to ensure that your issue is actionable.

If you don't follow the template, your issue may end up being closed without anyone looking at it carefully, because it is not actionable for us without the information in this template.

PLEASE NOTE: Feature requests and non-bug related discussions are no longer managed in this repo. Feature requests should be opened in https://github.com/apollographql/apollo-feature-requests. -->

Intended outcome: Work without errors. <!-- What you were trying to accomplish when the bug occurred, and as much code as possible related to the source of the problem. -->

Actual outcome:

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

<!-- A description of what actually happened, including a screenshot or copy-paste of any related error messages, logs, or other output that might be related. Places to look for information include your browser console, server console, and network logs. Please avoid non-specific phrases like “didn’t work” or “broke”. -->

How to reproduce the issue: I have an Electron + typescript app that just renders one component.

import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'

const Test = () => {
  const { data } = useQuery(GET_USERS)
  console.log(data)
  return null
}

render(
  <ApolloProvider client={client}>
    <Test />
  </ApolloProvider>,
  document.getElementById('app')
)

<!-- If possible, please create a reproduction using https://github.com/apollographql/react-apollo-error-template and link to it here. If you prefer an in-browser way to create reproduction, try: https://codesandbox.io/s/github/apollographql/react-apollo-error-template

Instructions for how the issue can be reproduced by a maintainer or contributor. Be as specific as possible, and only mention what is necessary to reproduce the bug. If possible, try to isolate the exact circumstances in which the bug occurs and avoid speculation over what the cause might be. -->

Version "react-apollo": "3.0.1", "react": "^16.9.0", "react-dom": "^16.9.0", "apollo-client": "^2.6.3", <!-- Run the following command in your project directory, and paste its (automatically copied to clipboard) results here:

npx envinfo@latest --preset apollo --clipboard -->

apollographql/react-apollo

Answer questions tonnenpinguin

In our case the issue was due to our umbrella app containing different react versions and I couldn't figure out how to get everything to use the right react versions. In the end we pinned all react versions to the one required by the react native app.

useful!
source:https://uonfu.com/
Github User Rank List