signal.cacheQuery

Watch data directly in the cache using reactive Signals.

Unlike Apollo.signal.query, it can only query the cache and does not execute a network request or any of Apollo Link's middleware.

It is ideal when querying local-only data.

API

Apollo.signal.cacheQuery<TData, TVariables>(
  options: SignalCacheQueryOptions<TData, TVariables>
): SignalCacheQuery<TData, TVariables>

Returns a SignalCacheQuery<TData, TVariables> instance. This object provides reactive Signals (result, data, complete, missing) reflecting the cache query's state.

Options

Property	Type	Description
query	DocumentNode | TypedDocumentNode<TData, TVariables>	A GraphQL query document parsed into an AST by gql.
variables?	NoInfer<TVariables> | (() => NoInfer<TVariables>)	An object containing all of the variables your query needs to execute. Can be provided as a static object, a signal, or a function that returns the variables. When provided as a function, it will be executed in a computed context and will automatically re-execute the query when any reactive dependencies change.
optimistic?	boolean	If true, the query will be evaluated against both the optimistic cache layer and the normal cache layer. This allows optimistic updates to be reflected in the query results immediately. @default: true
immediate?	boolean
returnPartialData?	boolean	If set to true, the observable will emit the partial data that is available in the cache. If set to false, the observable will throw an error if the complete data is not available in the cache. @default: false
injector?	Injector	Custom injector to use for this signal.

Signals

Signal	Type	Description
result	Signal<SignalCacheQueryResult<TData>>	The cache query result, containing data, complete, and missing.
data	Signal<TData>	The data returned by the cache query.
complete	Signal<boolean | undefined>	A signal indicating whether the query result contains complete data. - true: All requested fields are available in the cache - false: Some fields are missing from the cache - undefined: Query has not been executed yet
missing	Signal<unknown | undefined>	A signal containing an array of missing field errors if the query is incomplete. Will be undefined if the query is complete or has not been executed.

Executing a cache query

theme/theme.component.ts

import { Apollo } from '@apollo-orbit/angular';
import { THEME_QUERY } from '../graphql';

@Component({
 selector: 'app-theme',
 template: `
  <span>Current theme:</span>
  <span>{{ theme().displayName }}</span>
 `
})
export class ThemeComponent {
 private readonly apollo = inject(Apollo);
 
 protected readonly themeQuery = this.apollo.signal.cacheQuery({ query: THEME_QUERY });
}

Comparison

Apollo.signal.cacheQuery has few pros and cons compared to Apollo.signal.query method.

Pros

• By default data signal returns defined values and does not require null-checking.
  • Unless returnPartialData option is set to true.
• There's no need to handle loading and error states.
• Synchronous execution
  • The data is available immediately when the component is rendered.
  • When the signal value is accessed from an Angular component template, the template will complete rendering in a single cycle.
  • View children referenced in the component will be available in ngAfterViewInit lifecycle hook.

Cons

• Does not execute a network request if the data is not available in the cache.
• Throws an error if any selected field in the query is not available in the cache.
  • Unless returnPartialData option is set to true.