Quiero usar un solo componente Wrapper en una biblioteca que estoy proporcionando. El contenedor debe proporcionar cosas como Contexto y QueryClient. El componente se ve así:
import { QueryClient, QueryClientProvider } from "react-query"; const client = new QueryClient(); function Wrapper(props) { return ( <QueryClientProvider client={client}> {props.children} </QueryClientProvider> ); } Al envolver elementos secundarios con Wrapper , useQuery arroja un error que indica que no se ha establecido QueryClientProvider. En este caso, la App usa useQuery Hook de react-query.
import { Wrapper } from "my-lib"; ReactDOM.render( <React.StrictMode> <Wrapper> <App /> </Wrapper> </React.StrictMode>, document.getElementById("root") );Al principio, pensé que necesitaba un QueryClientProvider directamente encima de un enlace useQuery. Pero, por ejemplo, en Storybook puede definir un QueryClient para todas las historias juntas. ¿Dónde me equivoqué?
Editar: componente de la aplicación:
import { useQuery } from "react-query"; export const App = () => { const data = useQuery("data", () => fetch("https://jsonplaceholder.typicode.com/todos/1").then((res) => res.json() ) ); if (data.isError || data.isLoading) return <>Error/Loading</>; return <>{data.data.title}</>; };Bueno, unos pocos pasos conducen a mi objetivo:
react-query en devDependencies y peerDependencies .react-query en las dependencies .react-query del paquete agregándolo a la configuración de su paquete. En mi caso es el vite.config.ts : const path = require("path"); const { defineConfig } = require("vite"); module.exports = defineConfig({ build: { lib: { entry: path.resolve(__dirname, "src/index.ts"), name: "my-lib", formats: ["es", "umd"], fileName: "my-lib", }, rollupOptions: { external: [ "react", "react-dom", "react-query", ], }, }, });