why fetchMore sen two requests to my GraphQL server

[videni]

there is a button named "next" , when user clicks this button ,it is supposed to be one, but two requests sent to server.

 const { loading, error, data, fetchMore} = useQuery(GET_CUSTOMER_TICKETS, {
    variables: {
      first: DEFAULT_PAGE_SIZE,
      last: DEFAULT_PAGE_SIZE,
    },
  });
 

 const next = (after: string) =>  (e: React.SyntheticEvent) => {
    fetchMore({
      variables: {
        after
      },
    });
  };

the first time.

the second time:

you see , the second request without after cursor.

I don't know why.

there is a similar issue here, but add

extFetchPolicy: "cache-first"

not working at all.

[videni]

I store these cursors with useState hook, then I got one request.

  const [after, setAfter] = useState<string|null>();
  const [before, setBefore] = useState<string|null>();

  const { loading, error, data, fetchMore} = useQuery(GET_CUSTOMER_TICKETS, {
    variables: {
      first: DEFAULT_PAGE_SIZE,
      after,
      last: DEFAULT_PAGE_SIZE,
      before
    },
  });

  const next = (after: string) =>  (e: React.SyntheticEvent) => {
    fetchMore({
      variables: {
        after
      },
    });

    setAfter(after);
    setBefore(null);
  };

the first one is an options request , so not related to this issue, however the `args of my read policy, called two times, one with the after cursor, one with no cursor. why the read function got called with no cursor? since the after cursor is passed to fetchMore function, I swear the after cursor is not empty.

 read(existing, options) {
      const {
        args,
        readField,
        canRead,
      } = options;
      if (!existing) {
        return existing;
      }

      const {
        first,
        after,
        last,
        before
      } = args as ConnectionParameter;
    ///...
}

[videni]

closed, as it is similar with issue fetchMore and fetchPolicy: cache-and-network does not work together