Declare explicitly that a query should not be reactive. #1579
Open
Description
Describe the solution you'd like
I'm looking for an option to explicitly prevent a query from updating when a variable changes. I have no idea why one of my queries gets updated when a variable changes (none of the variables are refs or reactives). The only thing I found in the doc related to this is the following.
Each query declared in the apollo definition (that is, which doesn't start with a $ char) in a component results in the creation of a reactive query object.
But I have no clue on how or where to add that $
char.
In the end, I want my query to execute ONLY when I tell it to. Not whenever one of the variable changes.
Describe alternatives you've considered
- I have tried
query.stop()
but this breaks my pagination. I have also tried addingquery.restart/start()
before callingquery.fetchMore
and it doesn't work either. - I have scanned my app to make sure none of the variables where refs or reactives.
- I have tried the
enabled
,debounce
andthrottle
options without success.
Additional context
Here's the query in particular
const query = useQuery(
AdvancedSearch,
{
domain: pascalCase(config.domain),
limit,
cursor: "",
custom_list_slug: list?.slug || state.selectedList.value.slug,
criterias: criterias.map((c) => ({ ...c, domain: pascalCase(c.domain).toLowerCase() })),
order_by: state.orderBy.value,
...getColumnsToQuery(list?.columns || state.selectedList.value.columns, config.domain),
},
{
fetchPolicy: "cache-and-network",
nextFetchPolicy: "network-only",
},
);
getColumnsToQuery
return a Record<string, boolean>
object used with the @include
directives to show or hide some fields.
Excluding all the boolean params, here's the graphql query.
export const AdvancedSearch = gql`
${amountDataFragment}
${nameDataFragment}
${moneyDataFragment}
query catalogAdvancedSearch(
$domain: String!
$custom_list_slug: String!
$limit: Int
$cursor: String
$order_by: [OrderByInput]!
$criterias: [AdvancedSearchInput]
# all the boolean params for the @include directives
) {
advancedSearch(
order_by: $order_by
domain: $domain
limit: $limit
cursor: $cursor
custom_list_slug: $custom_list_slug
criterias: $criterias
) {
pageInfo {
total_records
returned_records
cursor
next_cursor
has_next_page
total_db_records
}
items {
apollo_id # unique id for cache purposes
# ...all the fields wit the @include directive
}
}
}
`