fetching is false in paginated nested query

[taufiqfebriant]

I was trying to make paginated data like Ben Awad's post on Twitter with nested query. It works, but fetching is not changing to true after first request.

Query

import { gql } from "urql";

export const GET_BOOKINGS = gql`
  query DashboardBookingsGetBookings(
    $bookingsCursor: BookingsCursorInput
    $bookingsTake: Int
    $bookingsSkip: Int
    $bookingsOrderBy: OrderByInput
  ) {
    viewer {
      id
      bookings {
        bookings(
          cursor: $bookingsCursor
          take: $bookingsTake
          skip: $bookingsSkip
          orderBy: $bookingsOrderBy
        ) {
          id
          status
          createdAt
          building {
            id
            name
          }
        }
        cursor
        hasMore
      }
    }
  }
`;

Bookings.js

const Bookings = () => {
  const initialVariables = useMemo(() => {
    return {
      bookingsTake: 5,
      bookingsOrderBy: { id: "desc" },
      buildingImagesOrderBy: { id: "asc" },
      buildingImagesTake: 1,
    };
  }, []);

  const [pageVariables, setPageVariables] = useState([initialVariables]);

  return (
    <>
      {pageVariables.map((variables, index) => (
        <DashboardBookingsLists
          key={index}
          variables={variables}
          isLastPage={index === pageVariables.length - 1}
          onLoadMore={(bookingsCursor, bookingsSkip) => {
            setPageVariables([
              ...pageVariables,
              {
                ...initialVariables,
                bookingsCursor,
                bookingsSkip,
              },
            ]);
          }}
        />
      ))}
    </>
  );
};

export default Bookings;

DashboardBookingsLists.js

import { GET_BOOKINGS } from "../../../graphql/pages/dashboard/booking/bookings";

export const DashboardBookingsLists = ({
  variables,
  isLastPage,
  onLoadMore,
}) => {
  const [{ fetching, data }] = useQuery({
    query: GET_BOOKINGS,
    variables,
  });

  useEffect(() => {
    console.log("fetching: ", fetching);
  }, [fetching]);

  if (fetching)
    return (
      <Center my="4">
        <Spinner color="yellow.400" size="lg" />
      </Center>
    );

  return (
    <>
      {data?.viewer?.bookings?.bookings?.map(booking => (
        <LinkBox key={booking.id}>
          {/* data */}
        </LinkBox>
      ))}
      {isLastPage && !fetching && data?.viewer?.bookings?.hasMore && (
        <Center mt="4">
          <Button
            onClick={() =>
              onLoadMore({ id: data?.viewer?.bookings?.cursor }, 1)
            }
          >
            Muat lebih banyak
          </Button>
        </Center>
      )}
    </>
  );
};

I tried to change requestPolicy to network-only, and it works, the fetching property was changed to true after first request. Is it possible to get the same result with cache-first?

[JoviDeCroock]

Hmm; are you using graphCache with schema-awareness? If that's the case we could be dealing with you getting back partial data. You can check this with result.stale

[taufiqfebriant]

stale works like a charm. That's what i'm looking for. And yes, i'm using graphcache with schema awareness.

Thank you very much @JoviDeCroock !!!