Apollo-client: [AC v3] - query still requesting the server even when using skip (sometimes)

Created on 10 Jul 2020 · 13Comments · Source: apollographql/apollo-client

I have a werid issue when using skip.

I have a query that is called only when a certain condition is met. This is how I'm doing the query

const { data: subAreasData, loading: subAreasLoading } = useSubareasQuery({
    variables: {
      where: {
        areaId: { _eq: area?.id },
        companyId: { _eq: company?.id },
      },
    },
    skip: !area || !company,
  });

If I do that, the query is still being made. Even If I force the skip to true. useSubareasQuery is actually called twice because the values of the variables changes.

The first time, the value of the variables are this

Then one of the variables changes it's value, but the skip condition still true

 if (!ref.current || !equal(key, ref.current.key)) { <--- HERE
    ref.current = { key: key, value: memoFn() };
}

The key is actually not equal to ref.current.key

If I instead of doing the above I do this

const skip = !area || !company;
  const subAreasFilters = !skip
    ? {
        areaId: { _eq: area?.id },
        companyId: { _eq: company?.id },
      }
    : {};
  const { data: subAreasData, loading: subAreasLoading } = useSubareasQuery({
    variables: {
      where: subAreasFilters,
    },
    skip,
  });

Then it does actually works and skips the network request.

Should changing the underlying variables object affect the if the request being made?

Any ideas what could the issue be?

Versions

System:
    OS: macOS 10.15.5
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Safari: 13.1.1
  npmPackages:
    @apollo/client: 3.0.0-rc.12 => 3.0.0-rc.12 
    @apollo/link-context: ^2.0.0-beta.3 => 2.0.0-beta.3 
    @apollo/link-error: ^2.0.0-beta.3 => 2.0.0-beta.3 
    apollo-upload-client: ^13.0.0 => 13.0.0 
  npmGlobalPackages:
    apollo-codegen: 0.20.2

Source

tafelito

👍1

Most helpful comment

@hwillson I'm seeing the same issue. This is with @apollo/[email protected]

See how fetchQueryObservable is called even with skip: true. I don't see any check for skip downstream after that.
ObservableQuery.prototype.setOptions is causing a fetch even though those options have skip: true.

Sharing more of what I'm seeing so you can repro:
This equality check is evaluating to false https://github.com/apollographql/apollo-client/blob/a928a1077510f0fb1d6ae18d4e8b1d5c2eb81a36/src/react/data/QueryData.ts#L242-L257

And this is how the options are changing

I am skipping once the customerId is undefined, but useQuery fetches with the undefined variable anyways.

gztomas on 17 Jul 2020

👍4

All 13 comments

It sounds a little bit similar to issue #6507 that I reported some time ago. There seems to be something really strange going on.

yngwi on 11 Jul 2020

@yngwi yes I think they might be related. I think there are 2 different things happening. As I pointed out, the first issue (my not be an issue) is that the first time the code runs, it actually skipped the request, but as soon as the variables changed, even tho the skip it still true, this !equal(key, ref.current.key)) becomes true and the memoFn is executed. That shouldn't be an issue if the skip was not ignored, and that's the 2 part of the issue. I couldn't find anywhere where the skip is actually used

tafelito on 13 Jul 2020

This issue is also referenced in 6190. The suggested hack usually works. A very bad bug that keeps breaking many things and destroying the dependability of the library.

KamalAman on 14 Jul 2020

This should now be fixed in @apollo/[email protected](reference: https://github.com/apollographql/apollo-client/pull/6589). Let us know if not - thanks!

hwillson on 15 Jul 2020

@hwillson I just tested this with @apollo/[email protected] and the issue is still there. I think the issue that was fixed on #6589 is quite different than I reported here.
The skip is ignored when the useQuery variables change, even if the skip is still true

Can we please re open this?

tafelito on 15 Jul 2020

And this is how the options are changing

I am skipping once the customerId is undefined, but useQuery fetches with the undefined variable anyways.

gztomas on 17 Jul 2020

👍4

We're running into this as well but with null variables.

Is it possible to work around this issue by using lazy query in an effect?
I saw another thread with a suggestion to use fetchPolicy: skip ? 'cache-only' : YOUR_POLICY, which seems to work but it's pretty ugly.

sirugh on 21 Jul 2020

@sirugh A workaround is to create the variables outside of the useQuery. Check my OP

tafelito on 21 Jul 2020

Creating the skip argument outside of the object did not work nor did using useMemo to memoize it. I am using a cache-and-network fetch policy which probably has something to do with it.

sirugh on 21 Jul 2020

@hwillson the issue still exists (when variables changes) , please re-open this

V 3.1.0