Aws-mobile-appsync-sdk-js: Refetch / Update for Paginated Query fails in React Native

[ArronHsiao]

Hi, I'm using React Native to implement pagination. Queries like this :

Query GQL :

graphql(ListUsers, {
      options: {
          fetchPolicy: 'cache-and-network',
      },
      props: (props) => ({
          Users: props.data.listUsers  && props.data.listUsers.items,
          data: props.data,
          fetchMore: () => {
            const { nextToken } = props.data.listUsers;
            const { fetchMore } = props.data;

            return fetchMore(
              {
                variables:{
                  nextToken
                },
                updateQuery: (prev, { fetchMoreResult }) => {
                  const combined =
                  {
                        listUsers: {
                          items: [...prev.listUsers.items, ...fetchMoreResult.listUsers.items],
                          __typename: fetchMoreResult.listUsers.__typename,
                          nextToken: fetchMoreResult.listUsers.nextToken,

                        }
                  };

                    if (!fetchMoreResult || !prev.listUsers.nextToken ) return prev;
                      return Object.assign({}, prev, combined);
            }
              }
            )
          }
      })
  }),

and try to do refetch after create a new User record.. but no matter how I do refetchQueries or update, the Query just won't refetch.

my createUser mutation looks like

graphql(CreateUserMutate, {
  props: (props) => ({
      AddUser: ({ userId, userKey, URL, name }) => props.mutate({
          variables: {
              userId,
              userKey,
              URL,
              name
          },
           optimisticResponse: () => ({
              createUser: {
                __typename: 'User',
                userId,
                userKey,
               URL,
               name
             }}),
      })
  }),
  options: {
      refetchQueries: [{ query: ListUsers }],
      update: (dataProxy, { data: { createUser} }) => {
      const query = ListUsers;
      const data = dataProxy.readQuery({ query });
      data.listUsers.items.push(createUser);
      dataProxy.writeQuery({ query, data });
      }
  }}),

[ArronHsiao]

I'm not sure If I do the pagination the right way. There is no example for AppSync pagination for react or react native, I just use fetchMore function to do the test... What kind of pagination fetching method do you recommend?

[Ryan-A-B]

Hey ArronHsiao, your updateQuery function seems a bit off.
This is working for me:

import { graphql, compose } from 'react-apollo';
import _ from 'lodash';
import ListWorkingSetsQuery from '../../queries/ListWorkingSets';

const makeOnFetchMore = (fetchMore, nextToken) => {
  if (!nextToken) { return null; }
  return () => {
    fetchMore({
      variables: { nextToken },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) { return prev; }
        return {
          ...prev,
          listWorkingSets: {
            ...prev.listWorkingSets,
            ...fetchMoreResult.listWorkingSets,
            items: [...prev.listWorkingSets.items, ...fetchMoreResult.listWorkingSets.items],
          },
        };
      },
    });
  };
};

export default compose(
  graphql(ListWorkingSetsQuery, {
    options: {
      fetchPolicy: 'cache-and-network',
    },
    props: (response) => {
      const items = _.get(response, ['data', 'listWorkingSets', 'items'], []);
      const nextToken = _.get(response, ['data', 'listWorkingSets', 'nextToken'], null);
      const onFetchMore = makeOnFetchMore(response.data.fetchMore, nextToken);

      return { items, onFetchMore };
    },
  }),
);

[elorzafe]

I will close this issue because of inactivity, @ArronHsiao feel free to create a new one if your problem persists.