cangsdarm / react-query-web-i18n Goto Github PK

 "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-query": "^3.39.2",

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 }], (param) => {
  //  let tmp = param.signal;//访问了 signal就会执行2次 不访问就执行一次 
    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>);

const loginMutaion = useMutation(
	(params: FormState) =>
		loginService(...omit params),
	{
		onSuccess: async (res) => {
			if (res.code === '200') {
				queryClient.setQueryData(['userData'], res.data)
				message.success('登录成功')
				navigate('/common/Home')
			}
		}
	}
)

login => loginMutaion.mutate

// App.tsx
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

const queryClient = new QueryClient({
defaultOptions: {
	queries: {
		cacheTime: 1000 * 60 * 60 * 24 // 24 hours
		}
	}
})

const persister = createSyncStoragePersister({
	storage: window.localStorage,
	key: 'userData'
})

<PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
	<Suspense>
		<Router />
	</Suspense>
</PersistQueryClientProvider>