Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
raphaelparent opened this issue Nov 1, 2024 · 0 comments
Open

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

raphaelparent opened this issue Nov 1, 2024 · 0 comments

Comments

@raphaelparent
Copy link

raphaelparent commented Nov 1, 2024

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
              }
          }
      }
 `
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant