@pvfhv/react-query-extend NPM

@pvfhv/react-query-extend

react-query扩展插件

安装

pnpm add -S @pvfhv/react-query-extend

使用

import { ReactQueryContainer, ReactQueryClientProvider, ReactQueryHooks } from '@pvfhv/react-query-extend';

// 入口文件
function App() {
  return (
    <ReactQueryClientProvider>
      <div>项目入口</div>
    </ReactQueryClientProvider>
  );
}

// 使用useQuery等类的组件
function QueryComponent() {
  const result = useQuery({
    queryKey: ['xxxxxx'],
    queryFn: () => fetchData(),
    staleTime: 1000 * 60 * 5,
  });
  return (
    <ReactQueryContainer result={result}>
      <div>使用useQuery类的组件</div>
    </ReactQueryContainer>
  )
}

// hooks
const { useObserverData, useScroll } = ReactQueryHooks;

function ObserverComponent() {
  const queryClient = useQueryClient()
  const containerRef = React.useRef<HTMLDivElement>(null)
  const timeRef = React.useRef<ITimeRef>({
    timer: null,
    span: 0,
    mouseEnter: false,
  })

  const [domainList, setDomainList] = React.useState<Pick<{
    personList: Array<{name: string; age: number}>
    total: number
  }, 'personList'>>(() => {
    // ['personsData']返回的数据结构
    // {
    //   personList: Array<{name: string; age: number}>
    //   total: number
    // }
    const viewData = queryClient.getQueryData(['personsData']) as any
    if (viewData) {
      return viewData
    }

    return {
      personList: [],
    }
  })

  useObserverData(['personsData'], setDomainList)
  useScroll(timeRef, containerRef)


  // 容器基本样式
  // .high-clues-container {
  //   width: 468px;
  //   height: 360px;
  //   overflow: hidden auto;

  //   > div > div:last-child {
  //     margin-bottom: 0;
  //   }
  // }

  return (
    <div>
      <div>年龄({domainList.personList.reduce((pre, cur) => pre + cur.age, 0)})</div>
      <div
        className="high-clues-container"
        ref={containerRef}
        onMouseEnter={() => {
          timeRef.current.mouseEnter = true
        }}
        onMouseLeave={() => {
          timeRef.current.mouseEnter = false
        }}
      >
          {xxList.length === 0 && <Empty />}
          {xxList.length > 0 && (<div style={{ overflow: 'hidden' }}>
            {xxList.map((item, index) => (
              <CardLi data={item} />
            )}
            </div>)
          }
      </div>
    </div>
  )
}