CODEWITHSUNDEEP
reactjsastrojstanstackreact-query
ThorirSf
ThorirSf

Reputation: 1

No QueryClient set, use QueryClientProvider to set one on astro

I'm getting this error:

Uncaught Error: No QueryClient set, use QueryClientProvider to set one at useQueryClient

I'm working on a chatbot interface. I'm rendering the component dashboard.jsx and it's getting data from the apiHandler.js which does the data fetching.

This is dashboard.jsx :

import { useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { submitQuery } from "@/pages/api/apiHandler.js";
import { Alert } from "@mui/material";

export function Dashboard() {
  const [query, setQuery] = useState("");
  const [temperature, setTemperature] = useState("0.4");
  const [limite, setLimite] = useState("3");
  const [conversation, setConversation] = useState([]);

  const mutation = useMutation({
    mutationFn: (queryData) =>
      submitQuery(queryData.query, queryData.temperature, queryData.limite),
    onError: (error) => {
      console.error("Error submitting query:", error);
      setAlert(error.message || "Failed to submit query");
      setTimeout(() => setAlert(null), 3000);
    },
    onSuccess: (data) => {
      if (data.error) {
        setAlert(data.error);
        setTimeout(() => setAlert(null), 3000);
        return;
      }

      setConversation((prevConversation) => [
        ...prevConversation,
        { type: "user", text: query },
        {
          type: "bot",
          messages: data.map((item) => ({
            pdfname: item.pdfname,
            article: item.Article,
            content: item.content,
          })),
        },
      ]);
      setQuery("");
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();

    if (temperature < 0 || temperature > 1) {
      setAlert("La température doit être entre 0 et 1");
      setTimeout(() => setAlert(null), 3000);
      return;
    }

    mutation.mutate({
      query: query,
      temperature: temperature,
      limite: limite,
    });
  };
return (.............);

This is apiHandler.js:

export async function submitQuery(queryText, temperature, limit) {
  return fetch('/api/search', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Content-Encoding': 'UTF-8'
    },
    body: JSON.stringify({
      query: queryText,
      threshold: temperature,
      limit: limit,
    }),
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .catch((error) => {
      console.error('Error submitting query:', error);
      return { error: error.message || 'Failed to submit query' };
    });
}

And this is index.astro:

---
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import '../styles/globals.css';
import { Dashboard } from '@/components/ui/dashbord';
const queryClient = new QueryClient();
---
<html>
  <head>
    <title>CoteJuriste</title>
  </head>
  <body>
    <QueryClientProvider client={queryClient}>
      <Dashboard client:only="react" />
    </QueryClientProvider>
  </body>
</html>

I was expecting to get the dashboard component on the browser but Im getting a blank page and the error mentioned

Upvotes: 0

Views: 102

Answers (0)

Related Questions