fix: infinite query hook reset

src/features/Posts/pages/FeedPage/FeedPage.tsx

@@ -1,5 +1,7 @@
 
+import { useUpdateEffect } from '@react-hookz/web'
 import { useReducer, useState } from 'react'
+import { Nullable } from 'remirror'
 import { useFeedQuery } from 'src/graphql'
 import { useAppSelector, useInfiniteQuery } from 'src/utils/hooks'
 import PostsList from '../../Components/PostsList/PostsList'
@@ -11,7 +13,7 @@ import styles from './styles.module.scss'
 
 export default function FeedPage() {
 
-    const [sortByFilter, setSortByFilter] = useState('all')
+    const [sortByFilter, setSortByFilter] = useState<string | null>(null)
     const [topicFilter, setTopicFilter] = useState<number | null>(null)
 
 
@@ -23,7 +25,9 @@ export default function FeedPage() {
             topic: topicFilter
         },
     })
-    const { fetchMore, isFetchingMore } = useInfiniteQuery(feedQuery, 'getFeed')
+    const { fetchMore, isFetchingMore, variablesChanged } = useInfiniteQuery(feedQuery, 'getFeed')
+    useUpdateEffect(variablesChanged, [sortByFilter, topicFilter]);
+
     const { navHeight } = useAppSelector((state) => ({
         navHeight: state.ui.navHeight
     }));

src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx

@@ -25,19 +25,18 @@ const filters = [
 ]
 
 interface Props {
-    filterChanged?: (newFilter: number) => void
+    filterChanged?: (newFilter: number | null) => void
 }
 
 export default function PopularTopicsFilter({ filterChanged }: Props) {
 
-    const [selected, setSelected] = useState(filters[0].value);
+    const [selected, setSelected] = useState<number | null>(filters[0].value);
 
     const topicsQuery = usePopularTopicsQuery();
 
 
-    const filterClicked = (newValue: number) => {
-        if (selected === newValue)
-            return
+    const filterClicked = (_newValue: number) => {
+        const newValue = selected !== _newValue ? _newValue : null;
         setSelected(newValue);
         filterChanged?.(newValue);
     }

src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { Nullable } from 'remirror';
 
 const filters = [
     {
@@ -14,16 +15,15 @@ const filters = [
 ]
 
 interface Props {
-    filterChanged?: (newFilter: string) => void
+    filterChanged?: (newFilter: string | null) => void
 }
 
 export default function SortBy({ filterChanged }: Props) {
 
-    const [selected, setSelected] = useState(filters[0].value);
+    const [selected, setSelected] = useState<Nullable<string>>(filters[0].value);
 
-    const filterClicked = (newValue: string) => {
-        if (selected === newValue)
-            return
+    const filterClicked = (_newValue: string) => {
+        const newValue = selected !== _newValue ? _newValue : null;
         setSelected(newValue);
         filterChanged?.(newValue);
     }

src/utils/hooks/useInfiniteQuery.ts

@@ -1,4 +1,5 @@
 import { QueryResult } from "@apollo/client";
+import { useUpdateEffect } from "@react-hookz/web";
 import { useCallback, useState } from "react";
 
 export const useInfiniteQuery = (query: QueryResult, dataField: string) => {
@@ -6,6 +7,10 @@ export const useInfiniteQuery = (query: QueryResult, dataField: string) => {
     const [reachedLastPage, setReachedLastPage] = useState(false)
 
 
+    const variablesChanged = () => {
+        setReachedLastPage(false);
+    }
+
     const fetchMore = useCallback(
         () => {
             if (!fetchingMore && !reachedLastPage) {
@@ -28,6 +33,7 @@ export const useInfiniteQuery = (query: QueryResult, dataField: string) => {
 
     return {
         isFetchingMore: fetchingMore,
-        fetchMore: fetchMore
+        fetchMore: fetchMore,
+        variablesChanged // Call this function whenever other query vars beside take/skip changes.
     }
 }