Amplify AppSync observeQuery triggers subscribe multiple times because of empty pagination

[pJimenezProadata]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

api

Backend

Amplify Gen 2

Environment information

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 1.72 GB / 15.69 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @aws-amplify/backend-cli: ^1.2.5 => 1.2.5
    @fortawesome/fontawesome-svg-core: ^6.4.2 => 6.4.2
    @fortawesome/free-regular-svg-icons: ^6.4.2 => 6.4.2
    @fortawesome/free-solid-svg-icons: ^6.4.2 => 6.4.2
    @fortawesome/react-fontawesome: ^0.2.0 => 0.2.0
    @tanstack/query-codemods:  undefined ()
    @tanstack/react-query: ^5.51.23 => 5.51.23
    @types/react: ^18.2.15 => 18.2.20
    @types/react-dom: ^18.2.7 => 18.2.7
    @vitejs/plugin-react: ^4.0.3 => 4.0.4
    @vitejs/plugin-react-swc: ^3.3.2 => 3.3.2
    aws-amplify: ^6.5.3 => 6.5.3
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    axios: ^1.4.0 => 1.4.0
    bootstrap: ^5.3.3 => 5.3.3
    env-cmd: ^10.1.0 => 10.1.0
    eslint: ^8.45.0 => 8.47.0
    eslint-plugin-react: ^7.32.2 => 7.33.2
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
    eslint-plugin-react-refresh: ^0.4.3 => 0.4.3
    history: ^5.3.0 => 5.3.0
    i18next: ^23.4.4 => 23.4.4
    i18next-browser-languagedetector: ^7.1.0 => 7.1.0
    i18next-http-backend: ^2.2.1 => 2.2.1
    primeicons: ^7.0.0 => 7.0.0
    primereact: ^10.8.0 => 10.8.0
    react: ^18.2.0 => 18.2.0
    react-bootstrap: ^2.8.0 => 2.8.0
    react-bootstrap/AbstractModalHeader:  undefined ()
    react-bootstrap/Accordion:  undefined ()
    react-bootstrap/AccordionBody:  undefined ()
    react-bootstrap/AccordionButton:  undefined ()
    react-bootstrap/AccordionCollapse:  undefined ()
    react-bootstrap/AccordionContext:  undefined ()
    react-bootstrap/AccordionHeader:  undefined ()
    react-bootstrap/AccordionItem:  undefined ()
    react-bootstrap/AccordionItemContext:  undefined ()
    react-bootstrap/Alert:  undefined ()
    react-bootstrap/Anchor:  undefined ()
    react-bootstrap/Badge:  undefined ()
    react-bootstrap/BootstrapModalManager:  undefined ()
    react-bootstrap/Breadcrumb:  undefined ()
    react-bootstrap/BreadcrumbItem:  undefined ()
    react-bootstrap/Button:  undefined ()
    react-bootstrap/ButtonGroup:  undefined ()
    react-bootstrap/ButtonToolbar:  undefined ()
    react-bootstrap/Card:  undefined ()
    react-bootstrap/CardGroup:  undefined ()
    react-bootstrap/CardHeader:  undefined ()
    react-bootstrap/CardHeaderContext:  undefined ()
    react-bootstrap/CardImg:  undefined ()
    react-bootstrap/Carousel:  undefined ()
    react-bootstrap/CarouselCaption:  undefined ()
    react-bootstrap/CarouselItem:  undefined ()
    react-bootstrap/CloseButton:  undefined ()
    react-bootstrap/Col:  undefined ()
    react-bootstrap/Collapse:  undefined ()
    react-bootstrap/Container:  undefined ()
    react-bootstrap/Dropdown:  undefined ()
    react-bootstrap/DropdownButton:  undefined ()
    react-bootstrap/DropdownContext:  undefined ()
    react-bootstrap/DropdownItem:  undefined ()
    react-bootstrap/DropdownMenu:  undefined ()
    react-bootstrap/DropdownToggle:  undefined ()
    react-bootstrap/ElementChildren:  undefined ()
    react-bootstrap/Fade:  undefined ()
    react-bootstrap/Feedback:  undefined ()
    react-bootstrap/Figure:  undefined ()
    react-bootstrap/FigureCaption:  undefined ()
    react-bootstrap/FigureImage:  undefined ()
    react-bootstrap/FloatingLabel:  undefined ()
    react-bootstrap/Form:  undefined ()
    react-bootstrap/FormCheck:  undefined ()
    react-bootstrap/FormCheckInput:  undefined ()
    react-bootstrap/FormCheckLabel:  undefined ()
    react-bootstrap/FormContext:  undefined ()
    react-bootstrap/FormControl:  undefined ()
    react-bootstrap/FormFloating:  undefined ()
    react-bootstrap/FormGroup:  undefined ()
    react-bootstrap/FormLabel:  undefined ()
    react-bootstrap/FormRange:  undefined ()
    react-bootstrap/FormSelect:  undefined ()
    react-bootstrap/FormText:  undefined ()
    react-bootstrap/Image:  undefined ()
    react-bootstrap/InputGroup:  undefined ()
    react-bootstrap/InputGroupContext:  undefined ()
    react-bootstrap/ListGroup:  undefined ()
    react-bootstrap/ListGroupItem:  undefined ()
    react-bootstrap/Modal:  undefined ()
    react-bootstrap/ModalBody:  undefined ()
    react-bootstrap/ModalContext:  undefined ()
    react-bootstrap/ModalDialog:  undefined ()
    react-bootstrap/ModalFooter:  undefined ()
    react-bootstrap/ModalHeader:  undefined ()
    react-bootstrap/ModalTitle:  undefined ()
    react-bootstrap/Nav:  undefined ()
    react-bootstrap/NavContext:  undefined ()
    react-bootstrap/NavDropdown:  undefined ()
    react-bootstrap/NavItem:  undefined ()
    react-bootstrap/NavLink:  undefined ()
    react-bootstrap/Navbar:  undefined ()
    react-bootstrap/NavbarBrand:  undefined ()
    react-bootstrap/NavbarCollapse:  undefined ()
    react-bootstrap/NavbarContext:  undefined ()
    react-bootstrap/NavbarOffcanvas:  undefined ()
    react-bootstrap/NavbarToggle:  undefined ()
    react-bootstrap/Offcanvas:  undefined ()
    react-bootstrap/OffcanvasBody:  undefined ()
    react-bootstrap/OffcanvasHeader:  undefined ()
    react-bootstrap/OffcanvasTitle:  undefined ()
    react-bootstrap/OffcanvasToggling:  undefined ()
    react-bootstrap/Overlay:  undefined ()
    react-bootstrap/OverlayTrigger:  undefined ()
    react-bootstrap/PageItem:  undefined ()
    react-bootstrap/Pagination:  undefined ()
    react-bootstrap/Placeholder:  undefined ()
    react-bootstrap/PlaceholderButton:  undefined ()
    react-bootstrap/Popover:  undefined ()
    react-bootstrap/PopoverBody:  undefined ()
    react-bootstrap/PopoverHeader:  undefined ()
    react-bootstrap/ProgressBar:  undefined ()
    react-bootstrap/Ratio:  undefined ()
    react-bootstrap/Row:  undefined ()
    react-bootstrap/SSRProvider:  undefined ()
    react-bootstrap/Spinner:  undefined ()
    react-bootstrap/SplitButton:  undefined ()
    react-bootstrap/Stack:  undefined ()
    react-bootstrap/Switch:  undefined ()
    react-bootstrap/Tab:  undefined ()
    react-bootstrap/TabContainer:  undefined ()
    react-bootstrap/TabContent:  undefined ()
    react-bootstrap/TabPane:  undefined ()
    react-bootstrap/Table:  undefined ()
    react-bootstrap/Tabs:  undefined ()
    react-bootstrap/ThemeProvider:  undefined ()
    react-bootstrap/Toast:  undefined ()
    react-bootstrap/ToastBody:  undefined ()
    react-bootstrap/ToastContainer:  undefined ()
    react-bootstrap/ToastContext:  undefined ()
    react-bootstrap/ToastFade:  undefined ()
    react-bootstrap/ToastHeader:  undefined ()
    react-bootstrap/ToggleButton:  undefined ()
    react-bootstrap/ToggleButtonGroup:  undefined ()
    react-bootstrap/Tooltip:  undefined ()
    react-bootstrap/TransitionWrapper:  undefined ()
    react-bootstrap/createChainedFunction:  undefined ()
    react-bootstrap/createUtilityClasses:  undefined ()
    react-bootstrap/createWithBsPrefix:  undefined ()
    react-bootstrap/divWithClassName:  undefined ()
    react-bootstrap/getInitialPopperStyles:  undefined ()
    react-bootstrap/getTabTransitionComponent:  undefined ()
    react-bootstrap/helpers:  undefined ()
    react-bootstrap/safeFindDOMNode:  undefined ()
    react-bootstrap/transitionEndListener:  undefined ()
    react-bootstrap/triggerBrowserReflow:  undefined ()
    react-bootstrap/types:  undefined ()
    react-bootstrap/useOverlayOffset:  undefined ()
    react-bootstrap/usePlaceholder:  undefined ()
    react-bootstrap/useWrappedRefWithWarning:  undefined ()
    react-dom: ^18.2.0 => 18.2.0
    react-hook-form: ^7.45.4 => 7.45.4
    react-hot-toast: ^2.4.1 => 2.4.1
    react-i18next: ^13.1.2 => 13.1.2
    react-promise-tracker: ^2.1.1 => 2.1.1
    react-router-dom: ^6.15.0 => 6.15.0
    sass: ^1.66.1 => 1.66.1
    vite: ^4.4.5 => 4.4.9
  npmGlobalPackages:
    @ionic/cli: 7.2.0
    cordova: 12.0.0
    corepack: 0.23.0
    firebase-tools: 13.5.0
    native-run: 2.0.1
    npm: 10.2.4

Describe the bug

When subscribing to an observeQuery call, if there are filters and the results are empty, the GraphQL API returns a nextToken and keeps making requests until nextToken is null

Expected behavior

nextToken should be null if the items array is empty

Reproduction steps

Subscribe to a model's observeQuery call with filters that make it so the results are empty

Code Snippet

        const vehicleTransferRequestSub = client.models.AmplifyVehicleTransferRequestCarDirect
            .observeQuery({
                authMode: "lambda",
                authToken: APP_CONF.PUBLIC_API_KEY,
                filter: {
                    originOffice: {
                        eq: params?.id
                    },
                    or: [
                        {
                            status: {
                                eq: "CANCELLED",
                            },
                            updatedAt: {
                                ge: DateTimeUtils.getLastMinute()
                            }
                        },
                        {
                            status: {
                                eq: "PENDING",
                            }
                        },
                        {
                            status: {
                                eq: "FINISHED",
                            },
                            updatedAt: {
                                ge: DateTimeUtils.getLast5Minutes()
                            }
                        },
                    ]
                }
            }).subscribe({
                next: ({items, isSynced}) => {
                    if (isSynced) {
                        const filteredPendingRequests = items?.filter(item => {
                            return item?.status === 'PENDING' && item?.serviceId === null;
                        });
                        setPendingTransferRequestFromAmplify(filteredPendingRequests);
                        const filteredProgressRequests = items?.filter(item => {
                            return item?.status === 'PENDING' && item?.serviceId !== null;
                        });
                        setProgressTransferRequestFromAmplify(filteredProgressRequests);
                        const filteredFinishedRequests = items?.filter(item => {
                            return item?.status === 'FINISHED';
                        });
                        if (filteredFinishedRequests?.length > 0) {
                            const lastFinishedDate = filteredFinishedRequests?.reduce((latest, current) => {
                                return new Date(current?.updatedAt) > new Date(latest?.updatedAt) ? current : latest;
                            });
                            if (lastFinishedDate) {
                                const newExpiryDate = new Date(lastFinishedDate?.updatedAt).getTime();
                                if (!expiryDate || newExpiryDate > expiryDate) {
                                    setExpiryDate(newExpiryDate);
                                }
                            }
                        }
                        setFinishedTransferRequestFromAmplify(filteredFinishedRequests);
                    }
                },
            });

    AmplifyVehicleTransferRequestCarDirect: a
        .model({
            id: a.id().required(), //Generated ID
            vehicleId: a.integer().required(), // Vehicle ID
            vehicleLicensePlate: a.string().required(), // Vehicle license plate to be transferred
            vehicleMake: a.string().required(), // Vehicle make
            vehicleModel: a.string().required(), // Vehicle model
            vehicleGroup: a.string().required(), // Vehicle group
            vehicleMileage: a.integer(), // Vehicle mileage
            originOffice: a.string().required(), // Origin office
            originOfficeName: a.string(), // Origin office name
            originParking: a.string(), // Origin parking
            destinationOffice: a.string(), // Destination office
            destinationOfficeName: a.string(), //Destination office name
            destinationParking: a.string(), // Destination parking
            transferRequestTypeId: a.integer().required(), // Transfer Request type ID
            transferRequestTypeName: a.string().required(), // Transfer Request type name
            creationDate: a.datetime().required(), // Transfer request creation date
            creationUser: a.string().required(), // Transfer request creation user
            reservationId: a.string(), // Reservation ID
            reservationType: a.string(), // Reservation type
            customer: a.string(), // Customer first name
            serviceId: a.id(), // Service ID
            status: a.enum(["PENDING", "FINISHED", "CANCELLED", "DELIVERED"]), // Transfer request status
            endDate: a.datetime(), // Transfer request end date
        })
        .authorization((allow) => [allow.custom()]),

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

{
    "data": {
        "listAmplifyVehicleTransferRequestCarDirects": {
            "items": [],
            "nextToken": "eyJ2ZXJzaW9uIjozLCJ0b2tlbiI6IkFnVjRGQjFiLzgwQjJHZzlucG9aR2ZxVWI3RlZ1WldOTUxTYXVKS1BGejJpTlFjQWV3QUNBQWRCY0hCVGVXNWpBQkZGYm1OeWVYQjBhVzl1UTI5dWRHVjRkQUFWWVhkekxXTnllWEIwYnkxd2RXSnNhV010YTJWNUFFUkJiMU5KWlZKVmQycFpNQ3RFV0VSUGNWZE5UVlpUYkd4MGNrRllTbmRzT1V0eVYzaGxNMjEyTUU5b1VFNHJXRkptYVVkeFNrWmFaMFU0YUhFemEzaERXVUU5UFFBQkFBZGhkM010YTIxekFFdGhjbTQ2WVhkek9tdHRjenBsZFMxM1pYTjBMVEU2TkRRME5qazNNVEUxTVRRd09tdGxlUzgxTURka1pqQmpOQzFrTW1OaExUUTVPREV0T1RRek1TMDBZbUU0WlRjMlptWTNNRFFBdUFFQ0FRQjRrL1ZMZ3F4cVFwbHIxR0U4S2Q4czBvcmduZW5MZ05zZldpSmozbFRYMG9VQlBJS1VRWjU5aDZhTzJ2UlVoQi9kN0FBQUFINHdmQVlKS29aSWh2Y05BUWNHb0c4d2JRSUJBREJvQmdrcWhraUc5dzBCQndFd0hnWUpZSVpJQVdVREJBRXVNQkVFREZrWnlhNGRjVUhoNTV6dm9nSUJFSUE3VXhvWmkrckVPRXIvTjFDc0tlOFdaVE9ob3FkelFsT2kraFc3U2V3ZjYyZGs1TlFWamlXQlZYb1I5SFQvOXhGeHhwM0Iva0ZBVWFrZk5Pc0NBQUFRQUNYcENvVjM1ZkNUSTJBMTRhdmxEay84WFNZMjl6d0pmMlhUWGQxcFJCRXc0VExCKytWZHZ2U3l4U3dGMVNZNG12Ly8vLzhBQUFBQkFBQUFBQUFBQUFBQUFBQUJBQUFCMUhNN2dTWHF0LzZ3K0dLbmtpV2xWM21aV0lIUlR0bzh1WThBM3hUdDEyQ1ZNKytGeE5YTEVKc3h6WXpCa0ZscnVtcmxycXUrSG1HdVlyK0p4NVFTelZJVlQ2Y28zRHJ5U1FTUFY5RW12THVjZ2ZvQXh2QXVtQUNCUXdKYWUxZWxOTks5cVdNYjV0ZStUT2JSck8xazJ6ZDRmUXBjK3A2SkRlWUZOeFVrNjl4RGNKcFkxT3I3OHRBS1d6NXJLVjhPcHltbmZ5RW9GUnlacGFOeXJDYkp5NmIrMkU5eEpPeXBlbzFOSm9LZmg4bGZIV1NWenhCRXpNZ1ZnQUxmTU1EWG9QMzluUkxWS1VBRlFMZ3ZEVzZVa3lhZ3ZGTFNOMTc0REJIVTk1ckRvbjVIeDVHczFHSSt5aDlQTFBsMkZHVy9DTm9ZVjRyWm00ZzREK0FUcnRxbjFJbGQ4N2x5c1ExYU9wVitkWnU2SXFHQ0JXTDJSNXk3MVFxeWg4V2Z3N09jR3ZHclFpK0ZjLzFLLzE1TkdyOHRXZFVxNkV1VDFpcXllbFNPanNsMmNDbTJraE04TXJ6eTFVRHpPTENsejJvZExYY0hTQ095Ry9SWmRra0tDcS9iSm9qd0tjZzJPY3MwTmVLVnI2T0w5dXV4eHlGdDJ6VTcraUdRTkd0dlA3VGliYnVRREg0aHFYdnNCQmpWYlhtblRYQzFVeUhJMVpCZUFZMnkxdnYyN0txUkhtYU1telJkR2kxdnFYaG5NQUcvUVNRM09qUGc5Q1ExYkFKbGpWb0lSQ0dtOVZtdEcrSjFsVGRCQWM5WjFWT1MwTzQzZitTdTFraHdqMGIrWitZNU9QZGdmME1BWnpCbEFqRUEwUUlubzFISGZUWDVMS2RaNG0yUEx6ajcxS3pLT0dycEp0QVRSL0dMOE12SSsxVmpHRzdDWmlSMDBTLzl1MEJJQWpCQkMxTlFPRjduc2w1WmloY0M0aWFYanc1Nng0Vnk1MTloVjBmS04zL3FXTEhMQUlYZEw2cmFhRlJvR1NCNFBwcz0ifQ==",
            "__typename": "ModelAmplifyVehicleTransferRequestCarDirectConnection"
        }
    }
}

[pJimenezProadata]

Follow up: it seems that if we remove the filters, we can observe that there is almost the same number of requests when it has data to retrieve that when there is no items.

It looks like AppSync is trying to loop through the database and filter every page manually even though we already know there are no items.