data-fetching

Data Fetching & State Management

Matters Web uses Apollo Client for GraphQL data fetching and state management.

GraphQL Structure

• src/components/GQL/queries: Contains reusable GraphQL queries
• src/components/GQL/mutations: Contains reusable GraphQL mutations
• Component-specific GraphQL operations are typically defined in a gql.ts file within each component directory

Apollo Client

The Apollo Client is configured in the app entry point (src/common/utils/apollo.ts). It utilizes a sophisticated setup involving multiple Apollo Links (e.g., for persisted queries, file uploads, retries, error handling, and context modification) to manage requests.

Key features include:

• Link Composition: Chains multiple links to handle concerns like authentication, fingerprinting, Sentry integration, and directing requests based on context (e.g., public vs. private queries).
• Cached Data Management: Leverages InMemoryCache with custom resolvers and typePolicies (including mergeables) for fine-grained control over how data is stored and merged. Uses fragment matching (introspectionQueryResultData) for accurate caching of polymorphic types.
• Error Handling: Uses onError link for centralized logging of GraphQL and network errors.
• Authentication Management: Conditionally includes credentials based on operation context.

Cache Management

Apollo Client provides powerful caching capabilities that help optimize performance and user experience. There are 3 main approaches to update the cache:

• Automatic Updates: Apollo automatically updates the cache for entities with matching IDs
• Refetching Queries: Force refetch queries after mutations to ensure fresh data
• Manual Updates: Directly modify the cache for complex scenarios

1. Automatic Updates

const TOGGLE_PIN = gql`
  mutation TogglePin($id: ID!, $pinned: Boolean!) {
    editArticle(input: { id: $id, pinned: $pinned }) {
      id
      pinned
    }
  }
`