Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 216
Guardian_nw Avatar asked Dec 08 '25 08:12

Guardian_nw


1 Answers

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
    }
  }
}
like image 97
Manzo Avatar answered Dec 11 '25 09:12

Manzo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!