Bug: Stack same queries with different variables

[fasibio]

Tested Versions:

• 3.0.0-alpha-7906fb34.0
• 3.0.0-alpha-577a9298.0
• 3.0.0-alpha-e9f8f97b.0

Simple Component:

import { useState } from 'react';

import { useQuery } from '../gqty';

export const Test = () => {
  const [tagSearchText, setTagSearchText] = useState<string>('search1');

  const { queryTag } = useQuery();

  const tagQueryResult1 = queryTag({
    filter: { name: { containsi: tagSearchText } },
  });

  return (
    <>
      <p>
        Search 1:{' '}
        {tagQueryResult1?.data.map((a) => ({
          id: a.id,
          name: a.name,
        })).length ?? 0}
      </p>
      <button
        onClick={() => {
          setTagSearchText('search2');
        }}
      >
        search html
      </button>
    </>
  );
};

Component description:

Make a initial Search for text search1 after button click. searchtext will change and second search (search2) will be execute.

Problem:

After Button click he Batch both Queries together.

After Pageload network content look like:

{
    "query": "query($a6e6b2:TagFiltersInput){a4be8:queryTag(filter:$a6e6b2){__typename data{__typename id name}}}",
    "variables": {
        "a6e6b2": {
            "name": {
                "containsi": "search1"
            }
        }
    }
}

After Buttonclick:

{
    "query": "query($a342b4:TagFiltersInput$a6e6b2:TagFiltersInput){a4be8:queryTag(filter:$a6e6b2){__typename data{__typename id name}}a8bf9:queryTag(filter:$a342b4){__typename data{__typename id name}}}",
    "variables": {
        "a6e6b2": {
            "name": {
                "containsi": "search1"
            }
        },
        "a342b4": {
            "name": {
                "containsi": "search2"
            }
        }
    }
}

you see search1 was execute again after buttonclick... this stack goes on and on search3, search4....

it looks like he stack the history... but why and how can I change it ?

[cdreier]

Hi,

i can confirm this behaviour.

for easier testing and reproducability, i added a minimal example for my testing api here

https://github.com/cdreier/gqty_rendering/blob/master/src/App_Search.tsx

the queries stack up on every keystroke, as described above

[vicary]

It is caused by object-hash including values, an upcoming patch will only use keys.

[cdreier]

Hi, i tested this and found a minimum of the last two queries in the request, most of the time even more. It is much better than before, as it does no longer stacks indefinitly, but there is still too much fetching going on

[vicary]

@cdreier Not sure what kind of fetching we're talking about, is it possible to show a video or minimum repo?

[cdreier]

i used this repo and code for testing

https://github.com/cdreier/gqty_rendering/blob/master/src/App_Search.tsx

2023-07-31.11-57-12.mp4

when typing slowly, you can see, that the query contains always the current and the last query - so we fetch always the unneeded query from the last event

[vicary]

This could be caused by the concurrent mode in React 18, where it renders twice at once, and gqty batches them together in a single fetch.

You may wrap the state variable in useDeferredValue to further reduce the fetch.

The official docs has examples on how to do it.

[fasibio]

I test it with component on top of issue:

Initial Query:

{
    "query": "query($fdd4d7:ID!){a13b6:getProject(id:$fdd4d7){__typename id title}}",
    "variables": {
        "fdd4d7": 1
    }
}

First Button Click:

{
    "query": "query($a7cf52:ID!$fdd4d7:ID!){a13b6:getProject(id:$fdd4d7){__typename id title}a8857:getProject(id:$a7cf52){__typename id title}}",
    "variables": {
        "fdd4d7": 1,
        "a7cf52": 2
    }
}

Second Button Click:

{
    "query": "query($a7cf52:ID!$d349f1:ID!){a2377:getProject(id:$d349f1){__typename id title}a8857:getProject(id:$a7cf52){__typename id title}}",
    "variables": {
        "a7cf52": 2,
        "d349f1": 3
    }
}

So I also have 2 queries with 2 variables.
And also with:

  const [tagSearchText, setTagSearchText] = useState<number>(1);

  const { getProject } = useQuery();

  const tagQueryResult1 = getProject({
    id: useDeferredValue(tagSearchText),
  });

I get the same result

[vicary]

Concurrent mode is kind of greedy, useDeferredValue tries to render back to back. When you enter the search text, multiple queries will be batched together, counting from the start of last query to the end of the immediate resulting render.

If you really need clean fetches, I recommend using the prepare option, or the useLazyQuery hook instead.

[cdreier]

Hi @vicary , thanks a lot for your help!

i tried to make another video the show the problem - i also added a few buttons to set the search term, so we can make sure, there is no greedy rendering issue and nothing is batched.

2023-08-01.08-51-44.mp4

as you can see, the query always sends the current query, and the previously sent query - i also played around with deferred values, but this doesn't change anything in this case.

[vicary]

My apologies for the confusion @fasibio @cdreier.

Turns out I was testing with a patched local copy when looking at this issue, this issue happens to be fixed by that change.

I cherry picked relevant changes here, please see if 3.0.0-alpha-eb61be5a.0 fixes your issue.

[vicary]

This should be fixed in canary, please reopen if this happens again.