apollo: Vue-Apollo v4 documentation doesn't follow Apollo Client v3 documentation

In the documentation regarding pagination, it guides the user to use updateQuery. However, in ApolloClient v3 this is deprecated with a warning that it will be removed in the next major version.

https://v4.apollo.vuejs.org/guide-composable/pagination.html

The updateQuery callback for fetchMore is deprecated, and will be removed
in the next major version of Apollo Client.

Please convert updateQuery functions to field policies with appropriate
read and merge functions, or use/adapt a helper function (such as
concatPagination, offsetLimitPagination, or relayStylePagination) from
@apollo/client/utilities.

The field policy system handles pagination more effectively than a
hand-written updateQuery function, and you only need to define the policy
once, rather than every time you call fetchMore.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 4
Comments: 15

Most upvoted comments

@MechJosh0 I started the project with Apollo Client 3, and it worked great until now.

As you can see in this screenshot the quotes are PaginatedItems type, but I’ve tried that too, in the typePolicies like that and its not working:

  typePolicies: {
    Query: {
      fields: {
        paginatedItems: {
          merge (existing, incoming, { readField }) {
            console.log('asdsadasd')
            if (!existing) return incoming

            return {
              next: incoming.next,
              results: [...existing.results, ...incoming.results]
            }
          },

          read (existing) {
            console.log('asdsadasd')
            if (existing) {
              return {
                next: existing.next,
                results: Object.values(existing.results)
              }
            }
          }
        }
      }
    }
  }

Here is my query:

query Quotes($limit: Int, $next: String) {
  quotes(limit: $limit, next: $next) {
    results {
      _id
      text
      character { id }
    }
    previous
    hasPrevious
    next
    hasNext
  }
}

and this is what I get back:

{
  "data": {
    "quotes": {
      "results": [
        {
          "_id": "5fe4df242c075a2e881d4cec",
          "text": "fabian",
          "character": {
            "id": "5fb110ebcdb33d42188f00b8"
          }
        },
        {
          "_id": "5fe4db392c075a2e881d4ceb",
          "text": "ererererer",
          "character": {
            "id": "5f91c4db67f18650500f1bdb"
          }
        },
        {
          "_id": "5fe4db0e2c075a2e881d4cea",
          "text": "dfdf",
          "character": {
            "id": "5f91beb6b487003740bc0ed4"
          }
        },
        {
          "_id": "5fe21fe9ced20755500b6aa4",
          "text": "AAAAAAAAAAAAAAAA",
          "character": {
            "id": "5fb11194cdb33d42188f00b9"
          }
        },
        {
          "_id": "5fe1f4b4799bc730d061b469",
          "text": "dfsd",
          "character": {
            "id": "5f91c4db67f18650500f1bdb"
          }
        }
      ],
      "previous": "eyIkb2lkIjoiNWZlNGRmMjQyYzA3NWEyZTg4MWQ0Y2VjIn0",
      "hasPrevious": false,
      "next": "eyIkb2lkIjoiNWZlMWY0YjQ3OTliYzczMGQwNjFiNDY5In0",
      "hasNext": true
    }
  }
}

I have no idea why it is not working. Can you please help me?

Maybe I just wait till the Vue Apollo 4 docs gets into better shape… Hope I will find answers there specific to VueJS. However I started to feeling worried about this library. The last major version was months ago… 😦

Got same issue trying to use TypePolicies for vue-composable queries and it doesn’t seem to “see” TypePolicies for my field. In contrary, I used resolvers (deprecated) with the same query and they work.

It seems I will have to use deprecated resolvers until vue-composables will be compatible with TypePolicies 😦

JoJk0 on Mar 4, 2021

@MechJosh0 I started the project with Apollo Client 3, and it worked great until now.

As you can see in this screenshot the quotes are PaginatedItems type, but I’ve tried that too, in the typePolicies like that and its not working:

  typePolicies: {
    Query: {
      fields: {
        paginatedItems: {
          merge (existing, incoming, { readField }) {
            console.log('asdsadasd')
            if (!existing) return incoming

            return {
              next: incoming.next,
              results: [...existing.results, ...incoming.results]
            }
          },

          read (existing) {
            console.log('asdsadasd')
            if (existing) {
              return {
                next: existing.next,
                results: Object.values(existing.results)
              }
            }
          }
        }
      }
    }
  }

Here is my query:

query Quotes($limit: Int, $next: String) {
  quotes(limit: $limit, next: $next) {
    results {
      _id
      text
      character { id }
    }
    previous
    hasPrevious
    next
    hasNext
  }
}

and this is what I get back:

{
  "data": {
    "quotes": {
      "results": [
        {
          "_id": "5fe4df242c075a2e881d4cec",
          "text": "fabian",
          "character": {
            "id": "5fb110ebcdb33d42188f00b8"
          }
        },
        {
          "_id": "5fe4db392c075a2e881d4ceb",
          "text": "ererererer",
          "character": {
            "id": "5f91c4db67f18650500f1bdb"
          }
        },
        {
          "_id": "5fe4db0e2c075a2e881d4cea",
          "text": "dfdf",
          "character": {
            "id": "5f91beb6b487003740bc0ed4"
          }
        },
        {
          "_id": "5fe21fe9ced20755500b6aa4",
          "text": "AAAAAAAAAAAAAAAA",
          "character": {
            "id": "5fb11194cdb33d42188f00b9"
          }
        },
        {
          "_id": "5fe1f4b4799bc730d061b469",
          "text": "dfsd",
          "character": {
            "id": "5f91c4db67f18650500f1bdb"
          }
        }
      ],
      "previous": "eyIkb2lkIjoiNWZlNGRmMjQyYzA3NWEyZTg4MWQ0Y2VjIn0",
      "hasPrevious": false,
      "next": "eyIkb2lkIjoiNWZlMWY0YjQ3OTliYzczMGQwNjFiNDY5In0",
      "hasNext": true
    }
  }
}

I have no idea why it is not working. Can you please help me?

Gyurmatag on Jan 5, 2021

@Gyurmatag

As per their Apollo Client 3 release announcement (and the console warning), we no longer want updateQuery on the fetchMore function, so you should go ahead and remove it entirely.

setup () {
    const { result: quotesResult, loading: quotesLoading, subscribeToMore, fetchMore, variables } = useQuery(quotesQuery, { limit: 5 })
    const quotes = useResult(quotesResult, null, data => data.quotes)

    function loadMore () {
      fetchMore({
        variables: {
          ...variables,
          next: quotes.value.next
        },
      })
    }

    return { quotes, quotesLoading, loadMore }
  }

Note: You’ll notice how I imported variables from Vue Apollo as I discovered this to be very helpful with fetchMore for pagination and refetch for searching and ordering. This will obviously be up to you if you and your use case if you find it helpful or not.

You should then read about offset pagination helpers and keyArgs to learn how to implement the new pagination methods.

If you can use Apollo Clients pagination helpers, you should. Otherwise, you will need to create the pagination logic yourself:

// ApolloConfiguration.ts
import { ApolloClient, InMemoryCache, NormalizedCacheObject, FieldPolicy } from "@apollo/client";
import { offsetLimitPagination } from "@apollo/client/utilities"

...

function customOffsetLimitPagination(): FieldPolicy {
        // Your custom pagination logic should go here.
        // You can have a generic pagination helper which can go with all your pagination queries
        // this is the ideal solution and the reason why Apollo Client 3 did this method.
        // Or you will need to write a pagination helper per query field.
	...
}

export const cache: InMemoryCache = new InMemoryCache({
	typePolicies: {
		Query: {
			fields: {
				Foo: customOffsetLimitPagination(),
                                Bar: offsetLimitPagination(),
			},
		},
	},
});

export const apolloClient: ApolloClient<NormalizedCacheObject> = new ApolloClient({
	...
	cache,
});

MechJosh0 on Jan 4, 2021