Skip to content

Instantly share code, notes, and snippets.

@joeynimu

joeynimu/useInfiniteQuery.js

Last active February 28, 2021 13:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joeynimu/948ba9626115e0adcf3bf3e23c49cf3e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joeynimu/948ba9626115e0adcf3bf3e23c49cf3e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joeynimu revised this gist Feb 28, 2021. 1 changed file with 21 additions and 8 deletions.
    29 changes: 21 additions & 8 deletions useInfiniteQuery.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,14 @@
    /**
    How do I update the next query variables so that on calling
    `fetchNextPage` page = 2 and so on and forth.
    Note, this is a graphql based API
    Also, how do I tell react-query to get the `hasNextPage` value. My API will return some info about this.
    /*
    I am having trouble using useInfiniteQuery with a paginated graphql API.
    The query expects a `page` variable that is used to get a specific page dataset.
    I am currently updating the `page` variable on click the `load more button` and calling the fetchNextPage function.
    While this works in terms of getting the next set of data, react-query seems to be returning only on page
    instead of returning the previous page + the current page's results. Hence, the results are from the initial page or last page results.
    How do I get back results from all the pages?
    */
    export default () => {
    const [page, setPage] = useState(1);
    @@ -12,12 +18,19 @@ export default () => {
    hasNextPage
    } = useInfiniteQuery(["data", page], () => getPaginatedProductItems({
    per_page: 10,
    page
    }));
    page // <- note these variables passed specifically this one. It's used to get a specific page dataset
    }), {
    getNextPageParam(lastPage) {
    return lastPage.paginated_product_items_v2.page_info.has_next;
    },
    getPreviousPageParam(firstPage) {
    return firstPage.paginated_product_items_v2.page_info.has_previous;
    },
    });

    return (<div>
    {hasNextPage && < button onClick={() => {
    setPage(page + 1); // update the page but this now makes data.pages be null, previous data is removed
    setPage(page + 1); // this is updated so that the API can get the next page of data
    fetchNextPage()
    }
    }> Fetch Next page </button>}
  2. joeynimu revised this gist Feb 28, 2021. 1 changed file with 10 additions and 8 deletions.
    18 changes: 10 additions & 8 deletions useInfiniteQuery.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    /**
    How do I update the next query variables so that on calling
    `fetchNextPage` page = 2 and so on and forth.
    `fetchNextPage` page = 2 and so on and forth.
    Note, this is a graphql based API
    Also, how do I tell react-query to get the `hasNextPage` value. My API will return some info about this.
    */
    export default () => {
    @@ -14,10 +15,11 @@ export default () => {
    page
    }));

    return ( < div >
    ...{
    hasNextPage && < button onClick = {
    () => fetchNextPage()
    } > Fetch Next page < /button>} <
    /div>)
    }
    return (<div>
    {hasNextPage && < button onClick={() => {
    setPage(page + 1); // update the page but this now makes data.pages be null, previous data is removed
    fetchNextPage()
    }
    }> Fetch Next page </button>}
    </div>)
    };
  3. joeynimu revised this gist Feb 28, 2021. 1 changed file with 17 additions and 10 deletions.
    27 changes: 17 additions & 10 deletions useInfiniteQuery.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,14 +3,21 @@
    `fetchNextPage` page = 2 and so on and forth.
    Also, how do I tell react-query to get the `hasNextPage` value. My API will return some info about this.
    */


    export default () => {
    const [page, setPage] = useState(1);
    const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(["data", page], () => getPaginatedProductItems({per_page: 10, page }));

    return (<div>
    ...
    {hasNextPage && <button onClick={() => fetchNextPage()}>Fetch Next page</button>}
    </div>)
    }
    const [page, setPage] = useState(1);
    const {
    data,
    fetchNextPage,
    hasNextPage
    } = useInfiniteQuery(["data", page], () => getPaginatedProductItems({
    per_page: 10,
    page
    }));

    return ( < div >
    ...{
    hasNextPage && < button onClick = {
    () => fetchNextPage()
    } > Fetch Next page < /button>} <
    /div>)
    }
  4. joeynimu created this gist Feb 28, 2021.
    16 changes: 16 additions & 0 deletions useInfiniteQuery.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    /**
    How do I update the next query variables so that on calling
    `fetchNextPage` page = 2 and so on and forth.
    Also, how do I tell react-query to get the `hasNextPage` value. My API will return some info about this.
    */


    export default () => {
    const [page, setPage] = useState(1);
    const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(["data", page], () => getPaginatedProductItems({per_page: 10, page }));

    return (<div>
    ...
    {hasNextPage && <button onClick={() => fetchNextPage()}>Fetch Next page</button>}
    </div>)
    }