Error: Should have a queue. This is likely a bug in React. Please file an issue. - react-query

Question

I am getting the error on production only, my dev machine is running the code fine using yarn dev.

It seems to be something to do with the react-query hook useQuery. The error is triggering inside the component where the useQuery hook is called. The API call is being triggered by the useQuery function as I can see the call in the console.

The component is as follows:

import { useQuery } from "react-query"
import { useRecoilState, useRecoilValue } from "recoil"
import {
    MenuItem,
    Skeleton,
    InputLabel,
    FormControl,
    Select,
} from "@mui/material"

import fetchIcpDropdownData from "../queries/fetchIcpDropdownData"
import { icpDropdownValueAtom, organisationIdAtom } from "../state/atoms"

export const FilterIcp = () => {
    const organisationId = useRecoilValue(organisationIdAtom)
    const icpDropdownQuery = useQuery(
        ["icpDropdownQuery", organisationId],
        () => fetchIcpDropdownData(organisationId)
    )
    const [icpDropdownValue, setIcpDropdownValue] =
        useRecoilState(icpDropdownValueAtom)
    const handleIcpDropdownChange = (event) => {
        setIcpDropdownValue(event.target.value)
    }

    if (icpDropdownQuery.error) return null

    return (
        <FormControl variant="outlined" sx={{ m: 2, minWidth: 190 }}>
            <InputLabel id="icp-label">Ideal Customer Profile</InputLabel>
            <Select
                labelId="icp-label"
                id="icp"
                value={icpDropdownValue}
                label="Ideal Customer Profile"
                onChange={handleIcpDropdownChange}
            >
                <MenuItem key={0} value={0}>
                    All
                </MenuItem>
                {icpDropdownQuery.isLoading ? (
                    <MenuItem key={1} value={-1}>
                        <Skeleton />
                    </MenuItem>
                ) : (
                    icpDropdownQuery.data.map((menuItem) => (
                        <MenuItem key={menuItem.id} value={menuItem.id}>
                            {menuItem.description}
                        </MenuItem>
                    ))
                )}
            </Select>
        </FormControl>
    )
}

export default FilterIcp

and the fetchDropdownData is as follows

import { AuraApi } from "../configuration/axios"

const fetchIcpDropdownData = async (organisationId) => {
    const requestUrl = "dropdown/icp/?organisation_id=" + organisationId
    const result = await AuraApi.get(requestUrl).then(
        (response) => response.data
    )
    return result
}

export default fetchIcpDropdownData

Answer 1

OK, so this was nothing to do with react-query and was actually me trying to use a hook outside of a React component.

Specifically, this was me trying to assign a session variable via a useSession hook to a state variable as a default value of an atom (organisationIdAtom) using a selector.

It's bad error messaging by React, but that was the issue and it is now solved.