vuejs / apollo

🚀 Apollo/GraphQL integration for VueJS
http://apollo.vuejs.org
MIT License
6.03k stars 523 forks source link

Declare explicitly that a query should not be reactive. #1579

Open raphaelparent opened 3 weeks ago

raphaelparent commented 3 weeks ago

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

  1. I have tried query.stop() but this breaks my pagination. I have also tried adding query.restart/start() before calling query.fetchMore and it doesn't work either.
  2. I have scanned my app to make sure none of the variables where refs or reactives.
  3. I have tried the enabled, debounce and throttle 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
              }
          }
      }
 `