Implementing Stoplight Search React Component Results in QueryClient Error

[dev-advocacy-qualtrics]

Implementing Stoplight Search React Component Results in QueryClient Error

Context

I am following this documentation to add Stoplight Elements Search to a React component on my web app.

Current Behavior

I keep seeing this error in the developer console when trying to render the component:

Uncaught (in promise) Error: No QueryClient set, use QueryClientProvider to set one

Expected Behavior

No QueryClient error gets thrown

Possible Workaround/Solution

I've looked online and it seems to stem from a react-query library, which has these posts about it. I tried implementing the changes mentioned in the Stack Overflow posts to no avail.

Steps to Reproduce

1. Install the latest versions of Stoplight elements-core (8.1.1) and elements-dev-portal (2.1.3)
2. Follow this documentation to implement the search functionality

Environment

"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.4",
"@stoplight/elements-core": "8.1.1",
"@stoplight/elements-dev-portal": "2.1.3",

[dev-advocacy-qualtrics]

Here is the code I'm using:

import '@stoplight/elements-dev-portal/styles.min.css';
import { Search as ElementsSearch, useGetNodes, useGetWorkspace } from '@stoplight/elements-dev-portal';
import * as React from 'react';

const STOPLIGHT_TEST_ID = 'cHJqOjIzNzM0NQ';

export default function DocumentationLanding() {

  const StoplightSearch = ({ projectIds }) => {

    const [search, setSearch] = React.useState('');
    const [open, setOpen] = React.useState(false);
    const { data } = useGetNodes({
      search,
      projectIds,
    });
    const { data: workspace } = useGetWorkspace({
      projectIds,
    });

    const handleClose = () => {
      setOpen(false);
      setSearch('');
    };

    const handleClick = (data) => {
      window.location.href = `https://${workspace?.workspace.slug}.stoplight.io/docs/${data.project_slug}${data.uri}`;
    };

    return (
      <>
          <input placeholder="Search..." style={{ color: 'white' }} onFocus={() => setOpen(true)} />
          <ElementsSearch
              search={search}
              onSearch={setSearch}
              onClick={handleClick}
              onClose={handleClose}
              isOpen={open}
              searchResults={data}
          />
      </>
    );
  };

  return (
    <StoplightSearch projectIds={[STOPLIGHT_TEST_ID]}  />
  );
}

[github-actions[bot]]

This ticket has been labeled jira. A tracking ticket in Stoplight's Jira (STOP-478) has been created.

[dev-advocacy-qualtrics]

This is pretty much a copy/pasta from this documentation page, so the likely culprit to me seems to be a dependency issue since the error seems to stem from a 3rd-party library.

[mnaumanali94]

This issue was occurring because searchComponent was not wrapped inside DevPortalProvider.