may be a bug??

[shanliu]

import axios from "axios";
import React from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false
    }
  }
})

function Layout() {
  const { isLoading, isError, error, data } = useQuery(["fff", { aa: 111 }], () => {
    // let tmp = param.signal;
    //When the signal is accessed, the request is executed twice, and when it is not accessed, it is executed once.
    //why???
    return axios.get("http://www.httpbin.org/get");
  })
  if (isLoading) {
    return <div>loading</div>
  }
  if (isError) {
    return <div>{error.message}</div>
  }
  return <div>
    <div>data:{data ? data.data ? data.data.origin : "" : ""}</div>
  </div>
}


function Root() {
  return <>
    <QueryClientProvider client={queryClient}>
      <Layout />
    </QueryClientProvider>
  </>
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<React.StrictMode><Root /></React.StrictMode>);

[TkDodo]

//When the signal is accessed, the request is executed twice, and when it is not accessed, it is executed once.

//why???

because in strict mode, react18 has strict effects, which means all side-effects run twice in short succession. If you don't consume the provided signal, react-query sees the second time that the query is already running and can dedupe, just as if two components would request data at the same time, or just as if the user navigates away from the page and comes back really fast.

If you consume the signal, what happens is:

• component mounts once, we fetch
• component unmounts, we abort
• component mounts again, we fetch again

this is also expected behaviour - it is also what you would get when the user navigates away from the page and them comes back. If they do this fast, it will also seem as if you'd fetch twice.

There is no amount of time we could wait to see if an observer re-mounts again, and since this only happens in dev env and react18 and strict mode, this is fine imo.

[shanliu]

thx..
This like black magic.

[shanliu]

  const { isLoading, isError, error, data } = useQuery(["fff", { aa: 111 }], () => {
    return axios.get("http://www.httpbin.org/get").then((data) => {
      //assuming there is a status field in the returned data and only when the status is considered normal is the result returned
      //if by throw, how to return other data in the result e.g.: if(!data.status) throw new Error('xxxxxx'); // how return data.other_data??? 
      return data;
    });
  })

[sched088]

Is there any test I can do on my device? Could there be two accounts associated with my name or email address? Max Scheder

…

On Wed, Dec 28, 2022 at 7:57 PM shanliu ***@***.***> wrote: thx.. This like black magic. — Reply to this email directly, view it on GitHub <#4718 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVJPJE5HCB3N5XT7PHKKQP3WPT43HANCNFSM6AAAAAATLDNGM4> . You are receiving this because you were mentioned.Message ID: ***@***.***>