Prevent graphql query in vue-apollo if input variable is null

Question

I've been doing some reading and have come up with a query setup for a contact input field. I would like to avoid running this query at component startup with null input. I could manually run the queries through computed methods maybe, but is there a simple way to prevent this?

apollo: {
    search: { 
        query: () => contactSearchGQL,
        variables() { 
            return { 
                searchText: this.searchText, 
            };
        },
        debounce: 300,
        update(data) { 
            console.log("received data: " + JSON.stringify(data));
        },
        result({ data, loading, networkStatus }) {
            console.log("We got some result!")
        },
        error(error) {
            console.error('We\'ve got an error!', error)
        },
        prefetch() { 
            console.log("contact search, in prefetch");
            if ( this.searchText == null ) return false;
            return true;
        },
    },
},

I think I'm not understanding something about prefetch, or if it's even applicable here?

Daniel Rearden · Accepted Answer · 2019-05-04 12:57:05Z

You should utilize the skip option for that, as shown in the docs:

apollo: {
  search: { 
    query: () => contactSearchGQL,
    variables() { 
      return { 
        searchText: this.searchText, 
      };
    },
    skip() {
      return !this.searchText;
    },
    ...
  },
},

Anytime searchText updates, skip will reevaluate -- if it evaluates to false, the query will be ran. You can also set the skip property directly if you need to control this logic elsewhere in your component:

this.$apollo.queries.search.skip = true

The prefetch option is specific to SSR. By default, vue-apollo will prefetch all queries in server-side rendered components. Setting prefetch to false disables this functionality for a specific query, which means that particular query won't run until the component is rendered on the client. It does not mean the query is skipped. See here for more details about SSR in vue-apollo.

Kriti · Accepted Answer · 2020-01-27 15:17:38Z

0

Apollo Client

const { loading, error, data } = useQuery(GET_SOME_DATA_QUERY, {
    variables: { param1 },
    skip: param1 === '',
  })

This query will be fired only when param1 is not empty.

answered Jan 27, 2020 at 15:17

Kriti

2,40317 silver badges16 bronze badges

Collectives™ on Stack Overflow

Prevent graphql query in vue-apollo if input variable is null

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related