Bug: Stack same queries with different variables #1594
Description
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 ?