react-use-query-timeout
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

react-use-query-timeout


LIVE EXAMPLE

Description

  • Simple use query graphql (react-hook) with timeout.
  • Default timeout 10m
  • From @apollo/client :v

Usage

npm install react-use-query-timeout

Import the module in the place you want to use:

import { useQueryTimeout } from 'react-use-query-timeout'

Snippet

simple
    const [request, setRequest] = useState<number | boolean | string>(0);
     // start request in { true | number !== 0 | string !== empty }

    const { data: queryData, loading, isRequestTimeout, error } = useQueryTimeout(QUERY, {
        variables: {
          start: xxx,
          end: xxx,
          ...
        },
        timeout: 60 * 1000, // 60s
        flagNewQuery: request,
        clearFlagNewQuery: setRequest
    });

    useEffect(() => {
        if (!loading) {
            console.log(queryData, loading, isRequestTimeout, error)
            debugger
        }
    }, [loading])


    // => change it => auto make new query
    <Button onClick={() => setRequest(+ new Date())}>Abcd</Button>

simple
    const { fetchQuery } = useQueryTimeout(QUERY, {
        variables: {
          start: xxx,
          end: xxx,
          ...
        },
        timeout: 60 * 1000, // 60s
    });

    const handlerAbc = () => {
        fetchQuery().then((rresult) => {
            console.log(rresult) // rresult.data | error | { isRequestTimeout }
            debugger
        })
    }


    <Button onClick={() => handlerAbc()}>Abcd</Button>


props


RUN

LIVE EXAMPLE

npm install
npm run dev
npm run start

License

MIT

Package Sidebar

Install

npm i react-use-query-timeout

Weekly Downloads

7

Version

2.0.0

License

MIT

Unpacked Size

10.3 kB

Total Files

6

Last publish

Collaborators

  • delpikye