apollo-client: 3.6.0 Some queries never executing with a conditional skip and overridden fetchPolicy

Intended outcome:

In my example app, clicking a person’s name uses setState to store their ID, and then runs a second query to find their country and display it. This second query only executes if a personId is passed in (using skip: !personId).

Actual outcome:

In apollo-client 3.4 and 3.5, this works as expected and displays a country. In 3.6, clicking a person’s name does nothing.

How to reproduce the issue:

See https://github.com/dmarkow/apollo-default-options-issue. Open the console and try clicking names. One render completes due to the setState call, however placesLoading from the second query remains false and the query never executes.

This seems to only happen if I have both defaultOptions.watchQuery.fetchPolicy set to anything, and a conditional skip option. If I completely remove the fetchPolicy setting it works, but then I can’t control caching on my queries. It also works if I remove the skip: !personId option and change the resolver to return an empty list when no personId is passed in.

Versions

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.14.2 - ~/.volta/tools/image/node/16.14.2/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 8.5.0 - ~/.volta/tools/image/node/16.14.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Safari: 15.4
  npmPackages:
    @apollo/client: 3.6.0 => 3.6.0

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 3
  • Comments: 16 (6 by maintainers)

Commits related to this issue

Most upvoted comments

v3.6.1 is not working with React Native, queries are not executed. Have to downgrade to v3.5.10

@benjamn @saladestomateoignon 3.7.0-alpha.2 fixed the issues for me on react native. I have a custom fetchPolicy and a number of typePolicies and things seem to be working as expected after the update.

I"m using react@17.0.2 and rn@0.66.4 although I doubt rn is the culprit. Maybe make sure nothing’s cached although the js should update on hot reload. Maybe check the @apollo/client package file to verify the version.

@benjamn, I will try to create a reproduction later (when I will have more free time 😃). @Vednus, which version of react-native and react are you using into your project? (I am using react-native@0.68.0 and react@17.0.2)

Thank you.

@benjamn Confirming that 3.7.0-alpha.2 fixed the issue

@benjamn That alpha seems to fix the problem both in my test repo and production app. Thanks!