Interview Questions
Apollo Client is a comprehensive state management library for GraphQL. Key features: declarative data fetching, zero-config caching, predictable mutations, automatic query deduplication. Integrates with any GraphQL API and UI framework.
Initialize using ApolloClient constructor, configure with cache and link options. Wrap application with ApolloProvider. Example: new ApolloClient({ cache: new InMemoryCache(), uri: 'graphql-endpoint' }). Set default options for queries/mutations.
InMemoryCache is Apollo's normalized caching system. Stores query results, handles data normalization. Features: type policies, field policies, custom resolvers. Essential for performance, offline capabilities, data consistency.
Data fetching through useQuery hook (React), query components. Supports variables, polling, skip/fetchMore. Handles loading/error states automatically. Features automatic caching, real-time updates.
Queries for reading data (idempotent), Mutations for modifying data. Queries can run parallel, mutations execute sequentially. Queries automatically cached, mutations require cache updates. Different hooks: useQuery vs useMutation.
Local state management through field policies, reactive variables. Can extend schema with @client directive. Features: local resolvers, cache manipulation. Integrates with global cache management.
Apollo Link customizes network layer behavior. Chain of middleware for request/response modification. Features: error handling, authentication, logging. Enables advanced network customization.
Error handling through GraphQL errors, network errors. Provides error information in query/mutation results. Features: error policies, retry mechanisms. Supports custom error handling logic.
TypePolicies configure cache behavior per type. Define key fields, field merging strategies. Features: custom merge functions, field policies. Essential for cache normalization.
Real-time updates through subscriptions, polling. WebSocket integration for live data. Features: subscription components/hooks, automatic updates. Supports optimistic UI updates.
useQuery hook fetches and manages query data. Provides loading/error states, refetch functions. Features: automatic caching, skip/pollInterval options. Essential for React component data fetching.
Pagination through fetchMore function, field policies. Supports offset/cursor-based pagination. Features: automatic cache merging, custom merge functions. Handles loading states automatically.
Reactive Variables store local state outside cache. Update components automatically on change. Features: no query requirement, direct reads/writes. Useful for global UI state.
Cache normalization through unique identifiers, type policies. Prevents data duplication, ensures consistency. Features: custom key fields, merge functions. Essential for efficient caching.
Optimistic UI updates cache before server response. Improves perceived performance, user experience. Features: optimistic response object, error rollback. Used with mutations for instant feedback.
Authentication through HTTP headers, context. Configure ApolloLink for token management. Features: token refresh, error handling. Supports different auth strategies.
Fragments define reusable field sets. Promote code reuse, maintainability. Features: colocated queries, type safety. Used for component-specific data requirements.
Query deduplication combines identical concurrent requests. Reduces network traffic, improves performance. Features: automatic caching, request batching. Configurable through client options.
Cache redirects customize cache reading behavior. Define relationships between cached entities. Features: field policies, custom resolvers. Useful for complex data relationships.
File uploads through apollo-upload-client package. Supports multipart form data, progress tracking. Features: multiple file uploads, abort capability. Requires server-side configuration.
Error handling through error policies, custom error handling. Implement retry logic, user feedback. Features: error components, global error handling. Consider different error types.
Offline support through cache persistence, local state. Implement retry strategies, queue mutations. Features: cache storage, conflict resolution. Consider offline-first architecture.
FetchPolicy controls cache/network behavior. Options: cache-first, network-only, etc. Features: customizable per query, default policies. Balances performance and data freshness.
Code splitting through dynamic imports, lazy components. Supports query splitting, fragment colocation. Features: automatic chunk loading, performance optimization. Important for large applications.
Field policies customize field behavior in cache. Define read/write functions, merge strategies. Features: custom field handling, computed fields. Essential for complex cache management.
Data prefetching through query preloading, cache priming. Improves perceived performance, user experience. Features: manual prefetch, automatic preloading. Consider resource utilization.
Performance optimization through caching, query batching. Implement field limiting, pagination. Features: automatic garbage collection, cache policies. Consider bundle size, network usage.
Client-side operations through local state, field policies. Implement search logic, filtering functions. Features: reactive variables, local resolvers. Consider performance implications.
Client directive marks fields for local-only operations. Enables client-side resolvers, computed fields. Features: local state management, schema extension. Used for UI state, computed data.
SSR through getDataFromTree, cache extraction. Handle initial state, hydration. Features: automatic cache population, state transfer. Consider SEO, performance requirements.