Apollo Client React container add created element to paginated list of elements without refetching

Question

This title is quite confusing, but I will try to explain the best that I can. I have a situation where I am collecting and displaying a list of data elements from the server in React Native. It uses a query that sends a GraphQL parameter to the server to limit the initial request to the first 15 elements.

query GetElements ($count: Int) {
    elements (count: $count) {
            id
            name
            tye
    }
}

As previously stated, this will query the main list with an initial count of 15 elements.

I have another page of the app that a user can create a new element on the backend using a different GraphQL query.

My question is: Is there a way to easily update the main list of elements to include the newly created element without performing any addition network requests? In other words, I want to be able to simply add the new element to the main list of elements whenever the create command is successful.

The problem is: Apollo's readQuery command on the update proxy will not return to me the appropriate data set to update unless I know the variables that were send with the initial query; this includes the pagination count variable.

I am aware that this can be done well using the updateQueries option, but I know that the Apollo team is trying to move people away from that right now. — Guardian_nw

Manzo Manzo · Accepted Answer · 2017-07-07T18:13:03

You can now define the key for the queries cache store like this:

 query AllItems($cursor: String, $limit: Int, $query: String) {
  items(cursor: $cursor, limit: $limit, query: $query) @connection(key: "AllItemsQuery") {
    count
    cursor
    has_next
    has_prior
    data{
      ...CoreItem
    }
  }
}

Apollo Client React container add created element to paginated list of elements without refetching

2 Answers