Apollo-client: Help need, after update, fetchMore didnot work.

Created on 31 May 2017  路  13Comments  路  Source: apollographql/apollo-client

old version:
"react-apollo": "^0.5.13",
"apollo-client": "^0.4.22",

update version:
"react-apollo": "^0.7.1",
"apollo-client": "^0.5.18",

the code below did not work on update version:

this.query = props.client.watchQuery({
  query: gql`${query}`,
  variables: {
    offset: this.state.length
  }
});

  this.query.fetchMore({
    variables: {
      offset: this.state.length
    },
    updateQuery: (previousResult, { fetchMoreResult }) => {
      if (!fetchMoreResult) { return previousResult; }
      return Object.assign({}, previousResult, {
        // Append the new feed results to the old one
      });
    }
  }).

it printed error:
Uncaught (in promise) Error: ObservableQuery with this id doesn't exist:

Anybody can help me out?
Thank you very much!

Most helpful comment

@helfer I am getting similar ObservableQuery with this id doesn't exist error when using fetchMore() without graphql HOC.

After calling query.subscribe(), then fetchMore() works. As I am still new to GraphQL & Apollo, I do not know why but at least it works.

Unless fetchMore() is meant to only be used within the graphql HOC, the pre-requisites to have it working properly should be documented.

All 13 comments

Hmm, that code looks like it should work fine - can you maybe console.log the previousResult and fetchMoreResult? I think the shape of those might not be what you expect.

I'd suggest updating to the newest version though, since those properties have a slightly different shape now: https://github.com/apollographql/apollo-client/blob/master/CHANGELOG.md#100-rc4

@kingkong2013 those are some really old versions, and we don't have the bandwidth to provide support for them or fix non-critical bugs. Can you try updating to 1.0?

@stubailo @helfer
Thank for your guys response.

my fetchMore function worked OK on old version, but when I want to install apollo-client-devtools chrome extension, it need me to upgrade to:

The dev tools require at least [email protected]. To see component names in the query inspector, you need at least [email protected].

but after I upgrade to that version, fecthMore didnot work.

now as your guys suggest I upgraded to latest version:
"react-apollo": "^1.0.0",
"apollo-client": "^1.0.0",

it turn out the same error:

dll.vendor.js:19 Uncaught (in promise) Error: ObservableQuery with this id doesn't exist: 3
    at e.getQueryWithPreviousResult (dll.vendor.js:19)
    at n.updateQuery (dll.vendor.js:18)
    at dll.vendor.js:18
    at <anonymous>

and I cannot console.log the previousResultand fetchMoreResult, it popup error before I can output.

BTW: after I upgrade to latest version, seem apollo-client-devtools didnot work.

@kingkong2013 I think the way you're using Apollo Client is very non-standard. Is there a reason you're not using the graphql higher order component from react-apollo? I think the problem that you're running into is that you're not actually starting the query by subscribing to it before you call fetchMore.

I would recommend rewriting your app to use a more standard way of querying, or reading the docs carefully to be really sure that what you're doing should work.

I think this isn't an issue with Apollo Client, so I will close it, but feel free to ask for help on the slack channel or on stackoverflow, where I'm sure someone will be happy to help further! 馃檪

@helfer,
Thank for your information.

the logic of my page is liked that:

  1. define observable query in constructor of react component
    this.query = props.client.watchQuery({...})
  2. get results in refresh() function. and put refresh() into componentDidMount(){}
    this.query.result().then((result) => {...})
  3. get more results in next() function in a table
    this.query.fetchMore({...})

it did work on old apollo version.
how to make it work on latest version without using graphql HOC from react-apollo

@helfer I am getting similar ObservableQuery with this id doesn't exist error when using fetchMore() without graphql HOC.

After calling query.subscribe(), then fetchMore() works. As I am still new to GraphQL & Apollo, I do not know why but at least it works.

Unless fetchMore() is meant to only be used within the graphql HOC, the pre-requisites to have it working properly should be documented.

Experiencing it too sometimes. I haven't been investigating this yet, but I suspect it's due to an unmounted / unmounting component. Possible that it's a race condition?

Also experiencing this issue. With the react-apollo HOC.

+1

+1

+1

+1

Was this page helpful?
0 / 5 - 0 ratings