why react query with silence becomes white screen

Question

why react query with silence becomes white screen

bobwatcherx opened this issue 2 years ago · comments

bobwatcherx commented 2 years ago

i follow you github examples . I have a problem with react-query

everything is running normally. but I silenced suddenly white screen

guess what's wrong with me

my Slowtodo.tsx

import { useQuery } from "@tanstack/react-query";

type TodoProps = {
  id: number;
};

export default function SlowTodo({ id }: TodoProps) {
  const query = useQuery(
    ["todo", { id }],
    async () => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      return fetch(
        `https://jsonplaceholder.typicode.com/todos/${id}`,
      ).then((response) => response.json());
    },
  );

  return <pre>{JSON.stringify(query.data, null, 2)}</pre>;
}

my Todo.tsx

import { useQuery } from "@tanstack/react-query";
import useAsync from "ultra/hooks/use-async.js";

type TodoProps = {
  id: number;
};

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};

function fetchTodo(id: number): Promise<Todo> {
  return fetch(
    `https://jsonplaceholder.typicode.com/todos/${id}`,
  ).then((response) => response.json());
}

export default function Todo({ id }: TodoProps) {
  const query = useQuery(
    ["todo", { id }],
    useAsync(() => fetchTodo(id)),
  );

  return <pre>{JSON.stringify(query.data, null, 2)}</pre>;
}

my experimental App.tsx

// Twind
import island from "ultra/hooks/use-island.js";
import Counter from "./Counter.tsx";
const CounterIsland = island(Counter);


import { lazy, Suspense } from "react";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import Todo from "./Todo.tsx";

const SlowTodo = lazy(() => import("./Slowtodo.tsx"));



import { tw } from "twind";
import { TwindProvider } from "./twind/TwindProvider.tsx";
import Home from './pages/Home.tsx';
import Nice from './pages/Nice.tsx';
import { Link, Route } from "wouter";
const FillViewportWrapper = ({ children }: PropsWithChildren) => {
  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
      }}
    >
      {children}
    </div>
  );
};
export default function App() {
  let noce = "123213"
  console.log("Hello world!");
  return (
    <TwindProvider>
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <title>Ultra</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="shortcut icon" href="https://github.com/favicon.ico" target="_blank" rel="nofollow" />
          <link rel="stylesheet" href="/style.css" />
        </head>
        <body>
          <main>
           <div className={tw`text(3xl white) bg-blue-500 p-3`}>
            Hello with-twind!
          </div>
              <Link href="/home">
            <a className="link">Home</a>
          </Link>
           <Link href={'/nice/' + noce}>
            <a className="link">Nice</a>
          </Link>
            <Route path="/home"><Home/></Route>
            <Route path="/nice/:id">
            {(params)=> <Nice age={params.id}/>}
            </Route>
            <FillViewportWrapper>
            hydrationStrategy: load
            <CounterIsland start={50} hydrationStrategy="load" />
          </FillViewportWrapper>
          <FillViewportWrapper>
            hydrationStrategy: idle
            <CounterIsland start={60} hydrationStrategy="idle" />
          </FillViewportWrapper>
          <FillViewportWrapper>
            hydrationStrategy: visible
            <CounterIsland start={20} hydrationStrategy="visible" />
          </FillViewportWrapper>

          {/*REACT QUERY*/}
            <Todo id={1} />
        <Todo id={2} />
        <Todo id={3} />
        <Suspense fallback={<div>Loading</div>}>
          <SlowTodo id={4} />
        </Suspense>
        <ReactQueryDevtools />
         </main>
        </body>
      </html>
    </TwindProvider>
  );
}