Interfaces: ApolloQuery
Apollo Query elements read data from the Apollo cache. Regardless of which library you use to build them, they share a common interface, e.g. a query component built with lit-apollo
has the same basic API as one built using hybrids
.
Query components inherit the ApolloElementInterface.
Common interface for query elements
See ApolloElementInterface
for more information on events
Properties
documentType
(read-only) inherited from ApolloElementElement'document'|'query'|'mutation'|'subscription'
returnPartialData
boolean | undefined
Opt into receiving partial results from the cache for queries that are not fully satisfied by the cache.
query
DocumentNode | ComponentDocument<D, V> | null
A GraphQL document containing a single query.
pollInterval
number | undefined
The time interval (in milliseconds) on which this query should be refetched from the server.
partialRefetch
boolean | undefined
Set to retry any partial query results.
If true, perform a query refetch if the query result is marked as being partial, and the returned data is reset to an empty Object by the Apollo Client QueryManager (due to a cache miss).
The default value is false for backwards-compatibility's sake, but should be changed to true for most use-cases.
partial
(read-only)boolean | undefined
True when the query returned partial data.
If data was read from the cache with missing fields, partial will be true. Otherwise, partial will be falsy.
options
ApolloQueryControllerOptions<D, V>
Option | Type | Description |
---|---|---|
fetchPolicy | WatchQueryFetchPolicy |
The fetchPolicy for the query. |
variables | Variables<D, V> |
Variables for the query. |
noAutoSubscribe | boolean |
If true, the element will not begin querying data until you manually call subscribe |
shouldSubscribe | (op?: Partial<Operation<D, V>>) => boolean |
Determines whether the element should attempt to subscribe automatically\nOverride to prevent subscribing unless your conditions are met |
onData | (data: Data<D>) => void |
Optional callback for when a query resolves. |
onError | (error: Error) => void |
Optional callback for when an error occurs. |
Inherits from ApolloControllerOptions
notifyOnNetworkStatusChange
boolean | undefined
Whether or not updates to the network status should trigger next on the observer of this query.
noAutoSubscribe
no-auto-subscribeboolean
When true, the component will not automatically subscribe to new data.
Call the subscribe()
method to do so.
nextFetchPolicy
next-fetch-policyWatchQueryFetchPolicy | NextFetchPolicyFunction<D, V> | undefined
Set to prevent subsequent network requests when the fetch policy is cache-and-network
or network-only
.
When someone chooses cache-and-network or network-only as their initial FetchPolicy, they often do not want future cache updates to trigger unconditional network requests, which is what repeatedly applying the cache-and-network or network-only policies would seem to imply. Instead, when the cache reports an update after the initial network request, it may be desirable for subsequent network requests to be triggered only if the cache result is incomplete. The nextFetchPolicy option provides a way to update options.fetchPolicy after the intial network request, without having to set options.
networkStatus
NetworkStatus
networkStatus
is useful if you want to display a different loading indicator (or no indicator at all)
depending on your network status as it provides a more detailed view into the state of a network request
on your component than loading
does. networkStatus
is an enum with different number values between 1 and 8.
These number values each represent a different network state.
loading
: The query has never been run before and the request is now pending. A query will still have this network status even if a result was returned from the cache, but a query was dispatched anyway.setVariables
: If a query’s variables change and a network request was fired then the network status will be setVariables until the result of that query comes back. React users will see this when options.variables changes on their queries.fetchMore
: Indicates that fetchMore was called on this query and that the network request created is currently in flight.refetch
: It means that refetch was called on a query and the refetch request is currently in flight.- Unused.
poll
: Indicates that a polling query is currently in flight. So for example if you are polling a query every 10 seconds then the network status will switch to poll every 10 seconds whenever a poll request has been sent but not resolved.ready
: No request is in flight for this query, and no errors happened. Everything is OK.error
: No request is in flight for this query, but one or more errors were detected.
If the network status is less then 7 then it is equivalent to loading
being true. In fact you could
replace all of your loading
checks with networkStatus < 7
and you would not see a difference.
It is recommended that you use loading
, however.
canAutoSubscribe
(read-only)boolean
Flags an element that's ready and able to auto subscribe
client
inherited from ApolloElementElementApolloClient<NormalizedCacheObject> | null
The Apollo Client instance.
context
inherited from ApolloElementElementRecord<string, unknown> | undefined
Context passed to the link execution chain.
controller
inherited from ApolloElementElementApolloController<D, V>
data
inherited from ApolloElementElementData<D> | null
The latest query data.
document
inherited from ApolloElementElementComponentDocument<D, V> | null
Operation document.
GraphQL operation document i.e. query, subscription, or mutation.
Must be a parsed GraphQL DocumentNode, so use graphql-tag
.
error
inherited from ApolloElementElementError | ApolloError | null
Latest error
errorPolicy
inherited from ApolloElementElement error-policyErrorPolicy | undefined
Error Policy for the operation.
Much like fetchPolicy
, errorPolicy
allows you to control how GraphQL errors
from the server are sent to your UI code. By default, the error policy treats any
GraphQL Errors as network errors and ends the request chain.
It doesn't save any data in the cache, and renders your UI with the error property
set to an ApolloError
. By changing this policy per request, you can adjust how
GraphQL Errors are managed by your UI. The possible options for errorPolicy
are:
none
(default): any errors from the request are treated like runtime errors and the observable is stopped (XXX this is default to lower breaking changes going from AC 1.0 => 2.0)ignore
: errors from the request do not stop the observable, but also don't callnext
all
: errors are treated like data and will notify observables
errors
inherited from ApolloElementElementreadonly GraphQLError[]
Latest errors
fetchPolicy
inherited from ApolloElementElement fetch-policystring | undefined
The fetchPolicy for the query.
Determines where the client may return a result from. The options are:
cache-first
(default): return result from cache, fetch from network if cached result is not available.cache-and-network
: return result from cache first (if it exists), then return network result once it's available.cache-only
: return result from cache if available, fail otherwise.no-cache
: return result from network, fail if network call doesn't succeed, don't save to cachenetwork-only
: return result from network, fail if network call doesn't succeed, save to cachestandby
: only for queries that aren't actively watched, but should be available for refetch and updateQueries.
loading
inherited from ApolloElementElementboolean
Whether a request is in flight.
readyToReceiveDocument
inherited from ApolloElementElementboolean
True when the element is connected and ready to receive its GraphQL document
variables
inherited from ApolloElementElementVariables<D, V> | null
Query variables.
An object map from variable name to variable value, where the variables are used within the GraphQL query.
Setting variables will initiate the query, unless noAutoSubscribe
is also set.
Methods
subscribeToMore
Lets you pass a GraphQL subscription and updateQuery function to subscribe to more updates for your query.
The updateQuery
parameter is a function that takes the previous query data,
then a { subscriptionData: TSubscriptionResult }
object,
and returns an object with updated query data based on the new results.
Parameters
options
SubscribeToMoreOptions<Data<D>, TSubscriptionVariables, TSubscriptionData>
Returns
void | (() => void)
subscribe
Resets the internal state of the query and subscribes.
Parameters
params
Partial<SubscriptionOptions<Variables<D, V>, Data<D>>>
Property | Type | Description |
---|---|---|
query | DocumentNode |
See query |
variables | Variables<D, V> |
See variables |
fetchPolicy | FetchPolicy |
See fetchPolicy |
errorPolicy | ErrorPolicy |
See errorPolicy |
context | Record<string, unknown> |
Context object passed through the link execution chain. |
Returns
ObservableSubscription
shouldSubscribe
Determines whether the element should attempt to subscribe i.e. begin querying Override to prevent subscribing unless your conditions are met
Parameters
options
Partial<SubscriptionOptions<Variables<D, V>, Data<D>>>
Property | Type | Description |
---|---|---|
query | DocumentNode |
See query |
variables | Variables<D, V> |
See variables |
fetchPolicy | FetchPolicy |
See fetchPolicy |
errorPolicy | ErrorPolicy |
See errorPolicy |
context | Record<string, unknown> |
Context object passed through the link execution chain. |
Returns
boolean
refetch
Update the variables of this observable query, and fetch the new results.
Parameters
variables
Variables<D, V>
The new set of variables. If there are missing variables, the previous values of those variables will be used..
Returns
Promise<ApolloQueryResult<Data<D>>>
Property | Type | Description |
---|---|---|
data | Data<D> |
If the query resolved, the data. |
error | ApolloError |
If the query rejected, the error. |
errors | readonly GraphQLError[] |
If the query returned partials results, and some were errors, the list of errors. |
loading | boolean |
Whether the operation is in-flight. |
partial | boolean |
Whether the query returned partial data. |
networkStatus | NetworkStatus |
See NetworkStatus. |
onError
Optional callback for when an error occurs.
Parameters
error
Error
the error.
Returns
void
onData
Optional callback for when a query is completed.
Parameters
data
Data<D>
the query data.
Returns
void
fetchMore
Exposes the ObservableQuery#fetchMore
method.
https://www.apollographql.com/docs/react/api/core/ObservableQuery/#ObservableQuery.fetchMore
The optional updateQuery
parameter is a function that takes the previous query data,
then a { subscriptionData: TSubscriptionResult }
object,
and returns an object with updated query data based on the new results.
The optional variables
parameter is an optional new variables object.
Parameters
params
Partial<FetchMoreParams<D, V>> | undefined
Option | Type | Description |
---|---|---|
query | DocumentNode |
Query to fetch, defaults to this.query |
updateQuery | Function |
Function to determine how to update the cache when the query resolves. (deprecated - use field policies instead) |
variables | Variables<D, V> |
Query variables |
context | Record<string, unknown> |
Context object passed through the link execution chain. |
Returns
Promise<ApolloQueryResult<D>>
Property | Type | Description |
---|---|---|
data | Data<D> |
If the query resolved, the data. |
error | ApolloError |
If the query rejected, the error. |
errors | readonly GraphQLError[] |
If the query returned partials results, and some were errors, the list of errors. |
loading | boolean |
Whether the operation is in-flight. |
partial | boolean |
Whether the query returned partial data. |
networkStatus | NetworkStatus |
See NetworkStatus. |
executeQuery
Executes a Query once and updates the component with the result
Parameters
params
Partial<QueryOptions<Variables<D, V>, Data<D>>> | undefined
Option | Type | Description |
---|---|---|
query | DocumentNode |
A GraphQL document that consists of a single query to be sent down to the server. |
variables | Variables<D, V> |
A map going from variable name to variable value, where the variables are used within the GraphQL query. |
fetchPolicy | FetchPolicy |
Specifies the fetchPolicy to be used for this query. |
errorPolicy | ErrorPolicy |
Specifies the ErrorPolicy to be used for this query. |
context | Record<string, unknown> |
Context object passed through the link execution chain. |
Returns
Promise<ApolloQueryResult<Data<D>>>
Property | Type | Description |
---|---|---|
data | Data<D> |
If the query resolved, the data. |
error | ApolloError |
If the query rejected, the error. |
errors | readonly GraphQLError[] |
If the query returned partials results, and some were errors, the list of errors. |
loading | boolean |
Whether the operation is in-flight. |
partial | boolean |
Whether the query returned partial data. |
networkStatus | NetworkStatus |
See NetworkStatus. |
Events
Name | Type | Description |
---|---|---|
apollo-query-result |
|
The query resolved |
apollo-error |
|
The query rejected |
apollo-element-connected |
|
The element connected to the DOM |
apollo-element-disconnected |
|
The element disconnected from the DOM |
Private API
Private Methods
documentChanged
inherited from ApolloElementElementLifecycle callback that reacts to changes in the GraphQL document
Parameters
document
ComponentDocument<D, V> | null
Returns
void
variablesChanged
inherited from ApolloElementElementLifecycle callback that reacts to changes in the operation variables
Parameters
variables
Variables<D, V> | null
Returns
void
Exports
import {
CustomElement,
ControllerHost,
ApolloElementElement,
ApolloMutationElement,
ApolloQueryElement,
ApolloSubscriptionElement
} from '@apollo-elements/core/types';