Next js добавить react qyery

Question

у меня есть файл layout, который как я понимаю основной в проекте

"use client";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "../../lib/providers";
import { QueryClient, QueryClientProvider } from "react-query";
const inter = Inter({ subsets: ["latin"] });
const queryClient = new QueryClient();
export const metadata: Metadata = {
  title: "My Blog",
  description: "Generated by create next app",
  icons: {
    icon: "./icon.ico",
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Providers>
      <QueryClientProvider client={queryClient}>
        <html lang="en">
          <body>{children}</body>
        </html>
      </QueryClientProvider>
    </Providers>
  );
}

Также у меня есть папка page в которой находится компонент Home и мне нужно обернуть в QueryClientProvider все приложение, сделать этого в layout файле не получается, т к чтобы это сделать нужно добавить "use client"; а в файл layout это добавлять нельзя, он вроде как считается серверным, почему-то( далее у меня была мысль обернуть Home в QueryClientProvider, но если я обарачиваю Home, то я это делаю в return, а в самом Home я не могу использовать const queryClient = new QueryClient();Как же быть с этим, это новый некст, там нет файла App и файла index, там только layout и page, дальше вопрос, предположим я обернул в провайдер компонент Home, к которому я обращаюсь по адресу localhost:3000/ , но у меня есть еще одна папка Personal туда я обращаюсь по адресу localhost:3000/personal, получается клиента от react-query не будет в personal, если я оберну только Home, а как с такой структурой папок, сделать так чтобы можно было обернуть в QueryClientProvider все приложение, приложе сюда еще компонент Home

"use client";
import { Provider, useDispatch, useSelector } from "react-redux";
import { RootState, store } from "../../store";
import Header from "@/components/Header/ui/Header";
import Footer from "@/components/Footer/ui/Footer";
import { useEffect, useState } from "react";
import { check } from "../../API/userApi";
import { setAuth, setUser } from "../../store/slices/authSlice";

import { Box, Container, Typography } from "@mui/material";

import { initLocales } from "./locales/initLocales";
import intl from "react-intl-universal";
import LinearProgress from "@mui/material/LinearProgress";
import { QueryClient, QueryClientProvider } from "react-query";
import Post from "@/components/Post";
import { addLikeHandler, getAllLikesHandler, getLNG, start } from "./utils";
import { RUSSIAN } from "./constants";
import axios from "axios";
import { useQuery } from "react-query";

interface likeProp {
  id: number;
  postId?: number;
  uniquePostId: number;
  userEmail: string;
  userId: number;
}

async function fetchPosts() {
  const { data } = await axios.get("api/post/getAllPosts");

  return data.data;
}
const queryClient = new QueryClient();
export default function Home() {
  const dispatch = useDispatch();
  const { allPosts } = useSelector((state: RootState) => state.posts);
  const { user, isAuth } = useSelector((state: RootState) => state.auth);
  const { myLikes } = useSelector((state: RootState) => state.likes);
  const [language, setLanguage] = useState<string>(RUSSIAN);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const postData = useQuery("posts", fetchPosts);
  initLocales(language);
  console.log("postData: ", postData);
  useEffect(() => {
    getLNG(language, setLanguage);
  }, []);

  useEffect(() => {
    if (localStorage.getItem("userToken")) {
      setIsLoading(true);
      check()
        .then((data) => {
          dispatch(setUser(data));
          dispatch(setAuth(true));
        })
        .catch(() => console.log("unauthorized"))
        .finally(() => {});
    }
    start(dispatch, setIsLoading);
  }, []);
  useEffect(() => {
    getAllLikesHandler(dispatch);
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <Header
          isLoading={false}
          language={language}
          setLanguage={setLanguage}
        />
        <Box className="wrapper">
          (
          <Box>
            <Typography textAlign="center" typography="h6">
              {intl.get("MAIN_TITLE")}
            </Typography>
            {!isAuth && isLoading && (
              <Typography typography="body" textAlign="center" mt={3}>
                {intl.get("PLEASE_LOGIN")}
              </Typography>
            )}
          </Box>
          <Container>
            {allPosts &&
              allPosts.map((item: any, id: number) => (
                <Post
                  getAllLikesHandler={() => getAllLikesHandler(dispatch)}
                  myLikes={
                    myLikes &&
                    myLikes.filter(
                      (like: likeProp) =>
                        like.uniquePostId === item.uniquePostId
                    )
                  }
                  addLikeHandler={() =>
                    addLikeHandler(item.uniquePostId, user, dispatch)
                  }
                  key={id}
                  post={item}
                  isForAllUsers={true}
                />
              ))}
          </Container>
          <div className="footer">
            <Footer />
          </div>
          )
        </Box>
      </Provider>
    </QueryClientProvider>
  );
}

БЛОГ НА HUSL

Next js добавить react qyery

Ответы (0 шт):