signal.fragment

Read and reactively track a GraphQL fragment in the cache using Signals.

API

Apollo.signal.fragment<TData, TVariables>(
  options: SignalFragmentOptions<TData, TVariables>
): SignalFragment<TData, TVariables>

Returns a SignalFragment instance with reactive Signals (result, data, complete, missing).

Options

Property	Type	Description
fragment	DocumentNode | TypedDocumentNode<TData, TVariables>	A GraphQL fragment document parsed into an AST with the gql template literal.
from	| string | Reference | StoreObject | (() => string | Reference | StoreObject)	An object containing a __typename and primary key fields (such as id) identifying the entity object from which the fragment will be retrieved, or a { __ref: "..." } reference, or a string ID (uncommon).
variables?	NoInfer<TVariables> | (() => NoInfer<TVariables>)	Any variables that the GraphQL fragment may depend on.
fragmentName?	string	The name of the fragment defined in the fragment document. Required if the fragment document includes more than one fragment, optional otherwise.
optimistic?	boolean	If true, watchFragment returns optimistic results. The default value is true.
injector?	Injector	Custom injector to use for this signal.

Signals

Signal	Type	Description
result	Signal<SignalFragmentResult<TData>>	The fragment result, containing data, complete, and missing.
data	Signal<DeepPartial<TData>>	The data returned by the fragment.
complete	Signal<boolean>	true if all requested fields in the fragment are present in the cache, false otherwise.
missing	Signal<MissingTree | undefined>	If complete is false, this field describes which fields are missing.

Watching a fragment

Inject Apollo and call signal.fragment, providing the fragment document and the cache identifier (from).

author-detail/author-detail.component.ts

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

@Component({
  selector: 'app-author-detail',
  template: `
    <h3>Author Details</h3>
    @if (authorFragment.data(); as author) {
      <p>ID: {{ author.id }}</p>
      <p>Name: {{ author.name }}</p>
    }
  `
})
export class AuthorDetailComponent {
  private readonly apollo = inject(Apollo);

  public readonly authorId = input.required<string>();

  protected readonly authorFragment = this.apollo.signal.fragment({
    fragment: AuthorFragmentDoc,
    from: () => ({ __typename: 'Author', id: this.authorId() })
  });
}

tip

In the example above, __typename can be omitted (e.g. from: { id: '1' })
Apollo Orbit will automatically extract the type name from the first fragment definition it encounters in the document, even if it contains multiple fragments.

SignalFragment automatically reacts to changes in the from and variables options if they are provided as signals or functions.