Skip to main content

Query Checklist

Basic query questions​

  • What kind of data am I fetching? Is it static or dynamic? Will I need to make API calls?
  • How frequently will the data be updated?
  • What formats do I need to present the data in? For example, do I need to display it in a table, chart, or graph?
  • Are there any specific UI/UX requirements or restrictions that I should be aware of?
  • Are there any specific performance or accessibility requirements that I should keep in mind?
  • What is the data source? Is it coming from a database, API, or other source?
  • What is the expected size of the data set? Will it require pagination or infinite scroll to display the data?
  • Are there any specific data filters or sorting requirements?
  • Will the data need to be transformed or manipulated before it's displayed?
  • How will the data be updated? Will it be through user input, periodic updates from the server, or some other mechanism?
  • Are there any security or authentication requirements for accessing the data?
  • Will the data need to be cached for performance reasons, or can it be fetched every time the component renders?

API Query Framework options​

This is loosely based on the comparison table for different UI Typescript API query systems here:

Tanstack Query: https://tanstack.com/query/v5/docs/react/comparison

RTK Query: https://redux-toolkit.js.org/rtk-query/comparison

Supported Query Syntax​

  • Promise: A JavaScript feature that represents the eventual completion (or failure) of an asynchronous operation and allows chaining of operations.

  • REST: A web service architecture that uses HTTP methods to manipulate data resources and has a standardized set of constraints and principles.

  • GraphQL: A query language and runtime for APIs that provides a single endpoint for multiple resources and allows clients to request specific data fields.

Supported Frameworks​

  • React is most common.

Caching Strategy​

  • Hierarchical Key -> Value

    • A caching strategy that uses a hierarchical structure for keys to store values, allowing for easy retrieval of related data.

  • Unique Key -> Value

    • Uses a unique identifier as the key to store values, enabling fast and direct access to specific data.

  • Normalized Schema

    • Stores data in a normalized schema, with each entity stored in its own cache to prevent duplication and maintain consistency.

  • Nested Route -> Value

    • Maps nested routes to corresponding values, providing efficient retrieval of data associated with specific routes. y Strategy

  • JSON types

    • Entire JSON object as the key to store values, providing a simple and flexible approach to caching.
    • Specific subset of the JSON object as the key to store values, allowing for more fine-grained control over caching.
    • JSON object derived from the query parameters as the key to store values, allowing for easy retrieval of data associated with specific queries.

  • GraphQL Query

    • GraphQL query as the key to store values, ensuring that data is only retrieved when the query parameters match.

Cache/Data Change Detection​

  • Deep Compare Keys (Stable Serialization):
    • Deep comparison of stable serialized keys to detect changes and ensure cache consistency.
  • Shallow Compare Keys:
    • Shallow comparison of keys to detect changes, providing fast performance but potentially less accuracy.
  • Deep Compare Keys (Unstable Serialization):
    • Deep comparison of unstable serialized keys to detect changes, allowing for greater flexibility but with a potential risk of inconsistency.
  • Key Referential Equality (===):
    • A cache change detection strategy that uses strict equality to detect changes based on the memory reference of keys, ensuring cache consistency for immutable data types.
  • Deep Comparison + Structural Sharing:
    • A data change detection strategy that uses a deep comparison of data with structural sharing to detect changes, enabling efficient and accurate change detection for complex data structures.
  • Deep Compare (via dequal):
    • A data change detection strategy via the "dequal" library to detect changes, providing a simple and reliable approach to change detection.

Data Memoization​

  • Full Structural Sharing:
    • A data memoization strategy that caches the entire data structure with structural sharing, enabling efficient and accurate memoization of complex data structures.
  • Identity (===):
    • A data memoization strategy that caches data based on its identity in memory, ensuring memoization consistency for immutable data types.
  • Normalized Identity:
    • A data memoization strategy that caches data based on a normalized identity, allowing for memoization of data with varying object shapes or structures while maintaining consistency.

Bundle Size​

  • Bundle size refers to the size of a compiled JavaScript file that contains all the code required for a web application to run in the browser.
  • It includes the code of the application itself, as well as all of its dependencies, libraries, and frameworks.
  • A smaller bundle size typically results in faster load times and better performance.

API Definition Location​

  • Component
    • An API definition location where the definition is defined inside the component, allowing for a more modular approach to building APIs and better encapsulation of logic.
  • External Config
    • An API definition location where the definition is defined in an external configuration file, allowing for easy customization and separation of concerns.
  • GraphQL Schema
    • An API definition location where the definition is defined in a GraphQL schema file, enabling strong typing, documentation, and client-driven development.

Queries​

  • Queries refer to a request for data from an API or database.
  • Using a specific query language such as SQL, GraphQL, or RESTful API syntax.

Cache Persistence​

  • Cache persistence refers to the ability of a cache to store data over time, even after the application or system that created it has been shut down or restarted.
  • There are several ways to achieve cache persistence, including storing cache data in a database or on disk, using in-memory caches with persistence options, or using specialized caching technologies that offer persistence as a built-in feature.
  • Persisting cache data can improve application performance by reducing the need to retrieve data from external data sources, while also providing fault tolerance and improving reliability.

Devtools​

  • Tools and features provided by web browsers or integrated development environments (IDEs) that allow developers to debug, inspect, and analyze web applications and websites.
  • Features may include code editors, console output, network analysis, performance monitoring, and more.
  • Identify and fix bugs, optimize application performance, and improve user experience.

Polling/intervals​

  • Polling/Intervals refer to the process of repeatedly requesting data from an API or server at set time intervals.
  • This is often used to keep application data up-to-date without requiring the user to manually refresh the page.
  • Polling/Intervals can be implemented in various ways, such as using JavaScript timers, server-side cron jobs, or specialized libraries and tools.
  • While this approach can be effective for simple use cases, it can also be resource-intensive and inefficient, especially when dealing with large or frequent data updates.
  • To mitigate these issues, other approaches such as WebSockets or server-sent events may be used to achieve real-time data updates.

Parallel Queries​

  • Parallel queries refer to the ability to execute multiple API queries simultaneously, either on the client or server-side.
  • This can improve application performance by reducing the time it takes to retrieve data and improving the efficiency of data processing.
  • Parallel queries can be implemented using various approaches, such as using Web Workers or multi-threaded programming on the server-side.
  • However, implementing parallel queries can also introduce complexity and requires careful consideration of system resources and potential race conditions.

Dependent Queries​

  • Executing queries in a specific order based on their dependencies.
  • Useful when dealing with complex data relationships or when data needs to be retrieved in a specific sequence.
  • Dependent queries can be implemented using various approaches, such as using GraphQL query resolvers or chaining promises in JavaScript.
  • May introduce additional complexity and requires careful consideration of data relationships and potential performance issues.

Paginated Queries​

  • Paginated queries refer to a technique for retrieving large amounts of data in smaller, manageable chunks.
  • This can improve application performance by reducing the amount of data retrieved and improving the efficiency of data processing.
  • Paginated queries can be implemented using various approaches, such as using LIMIT/OFFSET clauses in SQL queries or cursors in GraphQL.
  • However, implementing paginated queries can also introduce additional complexity and requires careful consideration of performance and user experience.

Infinite Queries​

  • A technique for continuously retrieving new data as the user scrolls or interacts with a web page.
  • Improves user experience by providing a seamless and responsive interface that dynamically updates with new content.
  • Can be implemented using various approaches, such as using intersection observers or scroll events in JavaScript or using GraphQL subscriptions.
  • It may introduce additional complexity and requires careful consideration of performance, network bandwidth, and caching strategies.
  • Other variations of this category may include techniques such as virtual scrolling, lazy loading, or pre-fetching, which can further optimize the performance and user experience of infinite queries.

Bi-directional Infinite Queries​

  • A technique for retrieving new data in both directions as the user scrolls or interacts with a web page.
  • This can improve user experience by providing a seamless and responsive interface that dynamically updates with new content in both forward and backward directions.
  • Bi-directional infinite queries can be implemented using various approaches, such as using two-way scroll events in JavaScript or using GraphQL subscriptions with support for multiple subscribers.
  • However, implementing bi-directional infinite queries can also introduce additional complexity and requires careful consideration of performance, network bandwidth, and caching strategies.
  • Other variations of this category may include techniques such as bidirectional virtual scrolling or using multiple queries with cursors to achieve bidirectional infinite scrolling, which can further optimize the performance and user experience of bi-directional infinite queries.

Infinite Query Refetching​

  • Periodically refetching data in an infinite query to ensure that the content remains up-to-date.
  • Improve data freshness and consistency in an infinite query that retrieves new data as the user scrolls or interacts with a web page.
  • Careful of potential issues with race conditions or data consistency.
  • Other variations of this category may include techniques such as incremental data loading, server-side caching, or client-side caching, which can further optimize the performance.

Lagged query data​

  • Lagged query data refers to a situation where data retrieved by a query may be outdated or stale due to network latency or other factors.
  • This can be problematic when dealing with real-time data or time-sensitive applications, and requires careful consideration of caching strategies and query design.
  • Variations may use data versioning, timestamp-based queries, or using subscription-based APIs to ensure that data is up-to-date and relevant.
  • Other approaches such as server-side rendering or pre-fetching may also be used to minimize the impact of lagged query data and provide a better user experience.

Selectors​

  • Selectors refer to a technique for extracting and transforming data from a store or state object in a predictable and efficient way.
  • This can improve application performance and simplify data management by providing a clear and well-defined API for accessing and manipulating data.
  • Variations of this category may include techniques such as memoized selectors, reselect libraries, or using GraphQL fragments to optimize data fetching and management.
  • Selectors are commonly used in state management libraries such as Redux or MobX, as well as in GraphQL-based applications and other data-driven web applications.

Initial Data​

  • Data that is preloaded or pre-rendered when a web page or application is first loaded.
  • Improves performance with the necessary data to render the initial view without requiring additional network requests.
  • Can be used with server-side rendering, pre-fetching, or using client-side caching to optimize the delivery and management of initial data.

Scroll Recovery​

  • Restoring the scroll position of a web page or application after a page refresh or navigation event.
  • This can improve user experience and reduce frustration by allowing the user to pick up where they left off without having to manually scroll to the correct position.
  • Variations of this category may include techniques such as using browser history, URL fragments, or session storage to store and restore scroll position information.
  • Scroll recovery is a common feature in modern web applications and is often used in conjunction with other techniques such as infinite scrolling or paginated queries to provide a seamless and responsive user experience.

Cache Manipulation​

  • Cache manipulation refers to the ability to manually add, update, or remove data from a cache in a controlled and predictable way.
  • This can be useful for managing data consistency, improving performance, or implementing offline functionality in web applications.
  • Use with cache invalidation, optimistic updates, or using client-side databases to store and manage cached data.

Query Dismissal​

  • Outdated query dismissal refers to a technique for canceling or ignoring outdated or stale API queries that are no longer relevant or useful.
  • This can improve application performance and prevent unnecessary network requests or data processing.
  • Variations of this category may include techniques such as using query keys or versioning to identify and dismiss outdated queries, or using caching or memoization to minimize the impact of network latency or data staleness.

Render batching and optimization​

  • Render batching and optimization refer to techniques for optimizing the rendering and update performance of web applications by grouping and batching DOM updates.
  • This can improve application performance and user experience by reducing the number of updates required and minimizing layout thrashing.
  • Variations of this category may include techniques such as using virtual DOM libraries, optimizing CSS styles, or using the requestAnimationFrame API to schedule updates.

Auto garbage collection​

  • Auto garbage collection refers to a technique for automatically freeing up memory or resources used by objects or data structures that are no longer needed or referenced.
  • This can improve application performance and prevent memory leaks or other resource-related issues.
  • Variations of this category may include techniques such as using automatic memory management in programming languages or using specialized libraries or tools for managing resources such as file handles or database connections.
  • Auto garbage collection is a critical consideration in web application design and can greatly impact application performance and stability.

Mutation Hooks​

  • Mutation hooks refer to a technique for executing side effects or other actions in response to a mutation.

Offline Mutation Support​

  • Offline mutation support refers to a technique for executing mutations when the user is offline or disconnected from the network.

Prefetching APIs​

  • Prefetching APIs refer to a technique for preloading data or resources that may be needed in the future.

Query Cancellation​

  • Canceling or aborting API queries that are no longer relevant or necessary, such as when the user navigates away from a page or interacts with an element in a way that invalidates the current query.

Partial Query Matching​

  • Partial query matching refers to a technique for matching a query against a subset of data in a cache or store.

Stale While Revalidate​

  • Stale while revalidate refers to a technique for using cached data while a new version of the data is being retrieved from the network.

Stale While Revalidate​

  • Stale time configuration refers to a technique for setting a maximum time period after which data in a cache or store is considered stale or outdated and should be refreshed.
  • This can improve data freshness and consistency in web applications and prevent the display of stale or irrelevant data.
  • Variations of this category may include techniques such as using a global stale time setting, or implementing individual stale time settings for specific queries or data sources.

Pre-usage query/mutation configuration​

  • A technique for configuring and preparing queries or mutations before they are executed or used in a web application.
  • This can improve performance and data consistency by optimizing the data fetching and manipulation process.
  • Variations of this category may include techniques such as query preloading, query batching, or using specialized libraries or tools for managing data fetching and manipulation.

Window focus refetching​

-Automatically refetching data or refreshing the state of a web application when the user returns to the application window after being away.

  • This can improve data freshness and consistency and prevent the display of stale or irrelevant data.
  • Usage could include techniques such as using the Page Visibility API or the Focus Event to detect when the user returns to the application window, and then triggering a refetch or state refresh accordingly.

Network Status Refetching​

  • Automatically refetching data or refreshing the state of a web application when the user's network connection status changes.

General Cache Dehydration/Rehydration​

  • Dehydrating or rehydrating a cache or store to persist data across sessions or page refreshes.

Query Dehydration/Rehydration​

  • Dehydrating or rehydrating a query to persist data across sessions or page refreshes.

Offline Caching​

  • Caching data or resources in a way that allows them to be used when the user is offline or disconnected from the network.

React Suspense​

  • React Suspense refers to a technique for deferring the rendering of a component until a query or mutation has been completed.

Abstracted/Agnostic Core​

  • An abstracted or agnostic core refers to a technique for providing a generic and flexible core that can be used with a variety of different data sources or data formats.