Skip to content

ApolloQuery component ​


  :query="gql => gql`
    query MyHelloQuery ($name: String!) {
      hello (name: $name)
  :variables="{ name }"
  <template v-slot="{ result: { error, data }, isLoading }">
    <!-- Loading -->
    <div v-if="isLoading" class="loading apollo">Loading...</div>

    <!-- Error -->
    <div v-else-if="error" class="error apollo">An error occurred</div>

    <!-- Result -->
    <div v-else-if="data" class="result apollo">{{ data.hello }}</div>

    <!-- No result -->
    <div v-else class="no-result apollo">No result :(</div>


To enable support of gql string tag in Vue templates, see the necessary setup in the guide.

Props ​

  • query: GraphQL query (transformed by graphql-tag) or a function that receives the gql tag as argument and should return the transformed query
  • variables: Object of GraphQL variables
  • fetchPolicy: See apollo fetchPolicy
  • pollInterval: Number of milliseconds. Polling provides near-real-time synchronization with your server by causing a query to execute periodically at a specified interval.
  • notifyOnNetworkStatusChange: See Inspecting loading states
  • context: See apollo context
  • update: Function to transform the result data, useful for picking a specific part of the response. Example: :update="data => data.user.messages"
  • skip: Boolean disabling query fetching
  • clientId: id of the Apollo Client used by the query (defined in ApolloProvider clients option)
  • deep: Boolean to use deep Vue watchers
  • tag: String HTML tag name (default: div); if falsy (for example null or undefined), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered
  • debounce: Number of milliseconds for debouncing refetches (for example when the variables are changed)
  • throttle: Number of milliseconds for throttling refetches (for example when the variables are changed)
  • prefetch: If false, will skip prefetching during SSR
  • options: Other Apollo Watch Query options

Scoped slot ​

  • result: Apollo Query result
    • Data returned by the query (can be transformed by the update prop)
    • result.fullData: Raw data returned by the query (not transformed by the update prop)
    • result.loading: Boolean indicating that a request is in flight (you may need to set notifyOnNetworkStatusChange prop for it to change)
    • result.error: Eventual error for the current result
    • result.networkStatus: See apollo networkStatus
  • query: Smart Query associated with the component. It's useful to do some operations like query.refetch() or query.fetchMore().
  • isLoading: Smart Query loading state
  • gqlError: first GraphQL error if any
  • times: number of times the result was updated

Events ​

  • result(resultObject)
  • error(errorObject)
  • loading(boolean)

Released under the MIT License.