Client-Side GraphQL with Apollo Client: Best Practices and Optimization Tips

Modern GraphQL APIs give frontend developers unprecedented flexibility and efficiency Apollo Client for Client-Side GraphQL &#

8211; into fetching exactly the data they need. When paired with Apollo Client, a powerful and popular GraphQL client library, developers can streamline data management on the client-side with intelligent caching, state management, and performance optimizations. However, leveraging these features to their full potential requires a solid understanding of Apollo Client’s capabilities and best practices. From query batching and caching to pagination and error handling, optimizing GraphQL on the client-side ensures responsive and reliable applications. This guide walks you through proven strategies and optimization tips to get the most out of Apollo Client. Whether you’re building a simple UI or a complex data-driven frontend, mastering these techniques will help you deliver efficient and scalable applications with confidence.

Introduction to Apollo Client for Efficient Client-Side GraphQL Queries

Apollo Client is a powerful state management library built to simplify GraphQL data handling on the client side. It allows frontend applications to fetch, cache, and update data with minimal boilerplate code. Whether you’re building with React, Angular, or Vue, Apollo provides seamless integration with popular frameworks. In client-side development, managing data efficiently is crucial for performance and user experience. Apollo Client offers smart caching, query deduplication, and real-time updates with subscriptions all out of the box.This article introduces Apollo Client’s core concepts and explores how it can streamline your GraphQL workflows. Let’s dive into building faster and smarter applications with Apollo Client.

What Is Apollo Client?

Apollo Client is a state management library that enables frontend applications to interact with a GraphQL API. It handles the full lifecycle of data fetching: sending queries, managing loading and error states, and updating UI automatically with the returned results.

Key Features of Apollo Client

• Automatic caching of query results
• Query batching and deduplication
• Built-in support for pagination and subscriptions
• React Hooks integration for cleaner UI logic
• Local state management using GraphQL syntax

Why Use Apollo Client for Client-Side GraphQL?

Using Apollo Client on the frontend provides significant advantages compared to traditional REST API data handling:

1. Reduces Over-fetching: GraphQL allows you to request only the fields you need. Apollo Client ensures this is respected on the frontend, leading to faster load times.
2. Automatic Caching: Apollo Client stores the data locally and updates it intelligently, improving responsiveness without manual intervention.
3. Declarative Data Fetching: Use GraphQL queries directly in your React components using useQuery or useLazyQuery hooks for better readability and maintainability.
4. Built-in Developer Tools: The Apollo DevTools extension provides real-time insight into queries, cache, and performance, making debugging easier.

Setting Up Apollo Client

Here’s a step-by-step guide to set up Apollo Client in a React application:

1. Install Apollo Client and Dependencies

npm install @apollo/client graphql

2. Configure Apollo Client

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-api.com/graphql',
  cache: new InMemoryCache(),
});

3. Wrap Your App with ApolloProvider

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

4. Making GraphQL Queries Using Apollo Client

Once set up, you can start writing queries directly inside your components.

Example: Basic Query Using useQuery

import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>{user.name} - {user.email}</li>
      ))}
    </ul>
  );
}

5. ptimizing Apollo Client for Performance

To get the most out of Apollo Client, consider these best practices:

1. Use Fragments for Reusability:

Fragments let you reuse common fields across multiple queries or mutations.

const USER_FRAGMENT = gql`
  fragment UserDetails on User {
    id
    name
    email
  }
`;

• Implement Pagination and Lazy Queries: Use fetchMore or cursor-based pagination strategies to handle large datasets efficiently.
• Avoid Over-fetching with Directives: Use GraphQL directives like @include and @skip to fetch conditional data.
• Leverage Apollo’s Cache Policies: Configure cache policies (cache-first, network-only, etc.) based on the data freshness you need.

Why Is Apollo Client Essential for Client-Side GraphQL Queries?

Apollo Client simplifies fetching, caching, and updating data in frontend applications using GraphQL. It provides built-in support for efficient state management, automatic UI updates, and performance optimization. With Apollo, developers can write cleaner code and deliver faster, more reliable user experiences.

1. Declarative Data Fetching with Minimal Code

Apollo Client allows you to fetch data declaratively using GraphQL queries directly inside your UI components. With React Hooks like useQuery and useMutation, you can manage loading, error, and response states automatically. This approach eliminates the need for manual HTTP calls or complex state logic. Developers can focus more on the UI and less on the networking layer. The result is cleaner, more maintainable code that aligns perfectly with component-driven development. This simplicity is essential for building scalable frontend applications efficiently.

2. Powerful In-Memory Caching Mechanism

One of Apollo Client’s standout features is its smart, normalized in-memory cache. It automatically stores query results and uses them to serve future requests without hitting the server again. This drastically improves app performance and reduces network latency. You can configure cache policies (like cache-first or network-only) depending on your data freshness needs. The cache is also aware of data relationships, which helps Apollo update only the necessary UI parts when data changes. This leads to faster rendering and a better user experience.

3. Automatic UI Updates with Real-Time Re-fetching

Apollo Client keeps your UI in sync with your backend data without manual intervention. When mutations are made or subscriptions receive new data, Apollo intelligently updates the cache and refreshes affected components. You can also use refetch or pollInterval to keep the UI live and current. This real-time behavior is crucial for dynamic applications like dashboards, social media feeds, or collaborative tools. Users get the most up-to-date data automatically, improving engagement and reliability.

4. Flexible Query Batching and Deduplication

Apollo Client can batch multiple GraphQL queries into a single request to minimize round-trips to the server. It also deduplicates repeated queries to avoid redundant calls. This ensures that network traffic is optimized, especially in component-heavy UIs where many components might request overlapping data. By minimizing bandwidth usage and server load, you create more efficient and scalable applications. This feature is particularly useful for mobile or low-bandwidth environments.

5. Built-in Developer Tools for Better Debugging

Apollo offers powerful developer tools that integrate directly into browser extensions like Apollo DevTools. These tools allow you to inspect your queries, mutations, and cache in real-time. You can see which queries are active, what data is stored in memory, and how the cache updates after operations. This transparency speeds up debugging and improves developer productivity. Having visibility into GraphQL operations helps identify performance bottlenecks and fix issues quickly.

6. Support for Pagination, Subscriptions, and Offline Usage

Apollo Client supports advanced GraphQL features like cursor-based and offset pagination, enabling you to load large datasets efficiently. It also handles real-time data updates through subscriptions, making it ideal for apps that require live data (like chat apps or stock trackers). Additionally, Apollo can work with service workers or custom storage solutions to provide offline capabilities. These advanced features make Apollo a full-fledged GraphQL client solution suitable for complex use cases.

7. Seamless Integration with Frontend Frameworks

Apollo Client integrates smoothly with popular frontend libraries like React, Angular, Vue, and even Vanilla JavaScript. It offers framework-specific bindings, such as React Hooks, which enable tight coupling between data and UI components. This makes state and data management more intuitive within modern frontend architectures. Whether you’re using Next.js for SSR, or React Native for mobile apps, Apollo adapts seamlessly. It empowers developers to build complex apps without rewriting logic for each platform. This flexibility is key to building cross-platform GraphQL-powered applications efficiently.

8. Customizable and Extensible Architecture

Apollo Client is designed with flexibility at its core. You can extend it with custom links, middleware, and network interfaces to tailor data flow and behavior as per your app’s needs. Want to log network requests, modify headers, or handle authentication? You can easily plug in custom logic using Apollo Link. Additionally, its modular nature allows integration with tools like Redux or REST APIs when needed. This extensibility ensures Apollo fits well in diverse tech stacks and large-scale enterprise environments.

Example of Apollo Client Essential for Client-Side GraphQL Queries

Using Apollo Client, a React app can fetch user profile data with a simple GraphQL query and automatically display it in the UI. When the data updates on the server, Apollo’s cache and reactivity ensure the UI reflects those changes instantly. This eliminates the need for manual API calls and state syncing, streamlining frontend development.

1. Fetching and Displaying User Data in React

Apollo Client enables declarative data fetching directly inside UI components. For example, in a user profile page, you can query user information and automatically manage loading and error states using Apollo’s useQuery hook.

import { useQuery, gql } from '@apollo/client';

const GET_USER_PROFILE = gql`
  query GetUser {
    user(id: "123") {
      id
      name
      email
      avatar
    }
  }
`;

function UserProfile() {
  const { loading, error, data } = useQuery(GET_USER_PROFILE);

  if (loading) return <p>Loading profile...</p>;
  if (error) return <p>Error loading profile: {error.message}</p>;

  return (
    <div>
      <img src={data.user.avatar} alt={data.user.name} />
      <h2>{data.user.name}</h2>
      <p>{data.user.email}</p>
    </div>
  );
}

Apollo Client automatically handles query execution, loading states, and data caching, making the UI reactive and simplified without writing boilerplate logic.

2. Client-Side Caching for Instant Page Loads

Let’s say you’re building a blog where users navigate between a post list and individual post pages. Apollo Client caches the query results of the post list so that navigating back to it doesn’t trigger a new network request.

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      summary
    }
  }
`;

function PostList() {
  const { data } = useQuery(GET_POSTS);

  return (
    <ul>
      {data?.posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

When users return to the post list after reading a post, Apollo serves the data instantly from the cache, improving load speed and user experience without re-fetching data from the server.

3. Mutations with Cache Update for Real-Time UI

Apollo makes it easy to perform mutations and update the cache, so the UI reflects changes immediately. For instance, when adding a new comment, the comment list updates instantly without requiring a separate fetch.

const ADD_COMMENT = gql`
  mutation AddComment($text: String!) {
    addComment(text: $text) {
      id
      text
      createdAt
    }
  }
`;

function AddCommentForm() {
  const [addComment] = useMutation(ADD_COMMENT, {
    update(cache, { data: { addComment } }) {
      const existingComments = cache.readQuery({ query: GET_COMMENTS });
      cache.writeQuery({
        query: GET_COMMENTS,
        data: { comments: [addComment, ...existingComments.comments] },
      });
    },
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const text = e.target.elements.comment.value;
        addComment({ variables: { text } });
      }}
    >
      <input name="comment" />
      <button type="submit">Add Comment</button>
    </form>
  );
}

Apollo’s ability to update the cache directly means the comment appears in the UI instantly—no refetching needed. This improves performance and responsiveness.

4. Polling for Real-Time Data Refresh in Dashboards

Suppose you have a stock market dashboard or a live auction page that needs frequent data updates. Apollo Client’s pollInterval helps you auto-refresh the data without writing complex interval logic.

const GET_STOCK_PRICES = gql`
  query GetStockPrices {
    stocks {
      symbol
      price
      change
    }
  }
`;

function StockDashboard() {
  const { loading, data } = useQuery(GET_STOCK_PRICES, {
    pollInterval: 5000, // Refresh every 5 seconds
  });

  if (loading) return <p>Loading stock prices...</p>;

  return (
    <table>
      {data.stocks.map((stock) => (
        <tr key={stock.symbol}>
          <td>{stock.symbol}</td>
          <td>{stock.price}</td>
          <td>{stock.change}</td>
        </tr>
      ))}
    </table>
  );
}

Apollo handles polling efficiently, reducing the need for custom code and ensuring users always see fresh data on real-time interfaces like financial dashboards or live feeds.

Advantages of Using Apollo Client for Client-Side GraphQL Queries

These are the Advantages of Using Apollo Client for Client-Side GraphQL Queries:

1. Simplified Data Fetching with React Integration: Apollo Client provides seamless integration with React through built-in hooks like useQuery and useMutation. These hooks enable you to perform GraphQL operations directly inside your components without extra boilerplate. It handles loading, error, and data states automatically. Developers no longer need to manually manage fetch calls or global state. This improves development speed and encourages cleaner, declarative code. It’s especially helpful in large applications with multiple data layers.
2. Efficient Client-Side Caching: Apollo includes a normalized in-memory cache that stores query results and minimizes redundant network requests. The cache helps avoid re-fetching the same data, speeding up app performance. It intelligently tracks relationships and auto-updates dependent components when data changes. You can configure cache policies like cache-first, network-only, or cache-and-network. This level of control provides both performance and flexibility. It also reduces server load and improves user experience.
3. Automatic UI Updates: Apollo Client syncs your UI with your backend automatically by updating the cache when a mutation or subscription occurs. Instead of writing manual logic to update components, Apollo reflects changes reactively. This keeps the UI consistent with the underlying data without reloading the entire page. It’s particularly useful for interactive applications like messaging, dashboards, or collaborative tools. With Apollo, real-time feedback becomes effortless and intuitive.
4. Built-in Support for Polling and Subscriptions: Apollo supports both polling and GraphQL subscriptions out of the box for real-time data fetching. Polling allows periodic re-fetching, useful for dashboards or time-sensitive content. Subscriptions, on the other hand, push data changes to the client instantly via WebSockets. These features allow developers to build live-updating UIs without complex setup. They also work seamlessly with Apollo’s cache for efficient state management. This makes Apollo ideal for applications needing real-time data syncing.
5. Powerful Developer Tooling: Apollo DevTools, available as a browser extension, helps inspect queries, mutations, and cache in real-time. Developers can monitor GraphQL network traffic and understand how data flows through their app. The tool provides visibility into what’s cached, what’s fetched, and how components are bound to data. This accelerates debugging, performance tuning, and learning. It’s especially useful when working in large codebases or team environments. Enhanced observability is a big advantage over custom-built solutions.
6. Customizable and Extensible Architecture: Apollo’s modular architecture allows you to plug in custom logic through Apollo Link and middleware. You can add authentication tokens, modify headers, or log queries all with minimal code. It supports REST integration, file uploads, retry logic, and more. This flexibility makes Apollo adaptable to enterprise-grade requirements. It integrates well with existing architectures and workflows. You can extend its behavior without losing the simplicity of its core features.
7. Optimized for Performance and Scalability: Apollo Client optimizes data flow, minimizes re-renders, and batches queries when needed. This makes it well-suited for high-performance apps with complex UIs and large datasets. Features like query deduplication, pagination, and partial query updates boost responsiveness. You can manage network usage and UI updates efficiently even as your app grows. This performance-first design ensures a smooth experience across mobile, desktop, and web platforms.
8. Seamless Integration with UI Frameworks: Apollo Client integrates effortlessly with popular UI frameworks like React, Vue, Angular, and even React Native. This ensures you can use Apollo across multiple platforms with minimal configuration. It provides framework-specific packages and bindings to support native development patterns. Whether you’re building a web dashboard or a mobile app, Apollo fits naturally into your codebase. This cross-platform compatibility streamlines development. It also reduces the learning curve for frontend teams working with GraphQL.
9. Improved Code Maintainability: Apollo encourages modular, readable, and testable code through its component-based query structure. By co-locating queries with components, developers can maintain clear separation of concerns. Each component handles only the data it needs, which reduces coupling and enhances clarity. This makes onboarding new developers easier and improves long-term maintainability. Combined with built-in state management, it reduces the need for external libraries like Redux. Apollo’s structure naturally promotes clean and scalable codebases.
10. Active Community and Robust Documentation: Apollo Client is backed by a large, active open-source community and maintained by Apollo Graph Inc. Its comprehensive documentation covers everything from basic setup to advanced features like cache eviction and error handling. Community forums, GitHub issues, and Discord channels provide continuous support. Regular updates ensure compatibility with evolving GraphQL standards. With plenty of learning resources and third-party tutorials, getting started is quick and smooth. This ecosystem reduces risk and boosts confidence in adopting Apollo at scale.

Disadvantages of Using Apollo Client for Client-Side GraphQL Queries

These are the Disadvantages of Using Apollo Client for Client-Side GraphQL Queries:

1. Steep Learning Curve for Beginners: Apollo Client comes with a rich set of features, but this can overwhelm newcomers to GraphQL or frontend development. Understanding how queries, mutations, caching, and client state interact requires a solid grasp of both GraphQL and Apollo’s architecture. Beginners may struggle with concepts like cache normalization and manual cache updates. While documentation is strong, mastering advanced features takes time. This can slow down initial development for small teams or solo developers.
2. Increased Bundle Size: Apollo Client includes many features out of the box, which can contribute to a larger JavaScript bundle. This may affect performance in lightweight or mobile-first applications. Even if you’re using only basic querying features, unused modules may still be included unless carefully optimized. Developers often need to fine-tune tree-shaking or split chunks to reduce payload. For performance-critical apps, the bundle size becomes a concern.
3. Complex Cache Management in Large Apps: While Apollo’s cache is powerful, managing it becomes complex in large-scale applications. Developers often need to write manual cache updates after mutations or use cache policies effectively. Failing to handle the cache correctly can lead to UI inconsistencies, stale data, or even runtime errors. This adds extra mental overhead and debugging time. In some cases, misconfigured cache logic can cause hard-to-detect bugs.
4. Overhead for Simple Applications: For small applications that only need basic data fetching, Apollo Client might feel like overkill. Simpler GraphQL clients like urql or even fetch with graphql-request may be more suitable. Apollo’s full set of features introduces complexity that isn’t always necessary for basic use cases. This includes configuration, caching strategies, and additional dev dependencies. In such cases, using Apollo may lead to unnecessary architectural bloat.
5. Requires GraphQL Expertise: Apollo Client assumes that developers are comfortable with GraphQL schemas, query structures, and types. If a team lacks backend GraphQL knowledge, they may struggle with debugging or writing optimized queries. Unlike REST, where data is often self-explanatory, GraphQL requires understanding the schema deeply. This learning requirement can slow down adoption in teams new to GraphQL. It may also increase dependence on backend engineers for schema exploration and query optimization.
6. Limited Built-in Error Handling Flexibility: While Apollo provides basic error handling for queries and mutations, it may not always cover complex use cases gracefully. Handling network errors, GraphQL-specific errors, and client-side errors together can become messy. Developers often need to write custom logic to map different error types to user-friendly messages. This adds boilerplate and complicates the flow, especially in large UIs. More granular or structured error handling would enhance developer experience.
7. Tight Coupling with React in Most Use Cases: Although Apollo supports multiple frameworks, the most robust tooling and community support are centered around React. This can create tight coupling between Apollo and React-specific patterns like hooks and component-based queries. Migrating to another frontend framework later might require a major refactor. This framework bias can be limiting for teams exploring non-React ecosystems. It also affects long-term flexibility in multi-framework projects.
8. Debugging Cache Issues Can Be Tricky: Apollo’s normalized cache system is powerful but can be difficult to debug when things go wrong. Developers might encounter cases where the UI doesn’t update correctly or shows stale data. Tracking down whether it’s a cache policy issue, an incorrect id, or a missed update function can be frustrating. These problems often require deep understanding of Apollo’s cache internals. Without proper tooling or experience, fixing such issues can be time-consuming.
9. Requires Setup and Configuration Overhead: Setting up Apollo Client involves configuring the cache, HTTP link, authentication headers, and possibly error handling and retry logic. While this is manageable for experienced teams, it adds initial complexity. New developers may find the setup overwhelming compared to REST-based tools or simpler GraphQL clients. Configuration must also be tailored for SSR (Server-Side Rendering), React Native, or multi-environment apps. This increases development time, especially for small projects.
10. Overdependence on Community Packages: While Apollo’s core is actively maintained, many advanced features rely on external community packages. For example, state management integration, persisted queries, or file uploads may require additional libraries. This can lead to compatibility issues, outdated documentation, or inconsistent updates. Relying heavily on community packages increases long-term maintenance overhead. Teams must vet and monitor third-party dependencies carefully to ensure stability and security.

Future Development and Enhancement of Using Apollo Client for Client-Side GraphQL Queries

Following are the Future Development and Enhancement of Using Apollo Client for Client-Side GraphQL Queries:

1. Improved Cache Handling with Less Manual Intervention: Apollo Client is expected to evolve toward smarter, more automated cache management. Enhancements may reduce the need for developers to write custom update functions or handle manual cache eviction. This would minimize bugs and streamline the data syncing process. Smarter defaults and AI-assisted cache policies could simplify complex workflows. These improvements would benefit large-scale applications managing dynamic, real-time data.
2. Deeper Integration with TypeScript and Static Typing: Future updates are likely to bring tighter integration with TypeScript, making static typing easier and more intuitive. This may include auto-generated types, better IDE support, and more type-safe cache operations. Strong typing reduces runtime errors and boosts developer productivity. As TypeScript adoption grows, Apollo will likely enhance its DX (developer experience) around typing. This will help teams maintain large codebases with fewer bugs.
3. Enhanced Real-Time Capabilities with Subscriptions: Subscriptions in Apollo Client currently rely on WebSockets, but future improvements may offer better tools for real-time collaboration and low-latency apps. Enhanced support for GraphQL over HTTP/2 or QUIC could replace WebSockets in some scenarios. Improvements in connection stability, reconnection strategies, and real-time caching are expected. These upgrades will allow developers to build responsive, data-driven applications more efficiently.
4. Smaller, More Modular Packages for Performance: The Apollo team is working on making the client library more modular, allowing developers to include only the pieces they need. This will significantly reduce the overall JavaScript bundle size, especially in performance-sensitive mobile apps. Tree-shakable modules and leaner builds could improve load times and user experience. Modularization also makes Apollo more competitive with lightweight alternatives. This shift aligns with modern frontend performance goals.
5. Built-in Support for Offline Queries and Syncing: Offline-first capabilities are becoming more important, especially for mobile and edge applications. Future versions of Apollo Client may include built-in support for offline query queuing and automatic syncing once the connection is restored. This feature would improve user experience in unstable network environments. Offline caching strategies could also be more configurable. This will enable developers to create more resilient apps without external libraries.
6. Advanced Developer Tools and Observability: Apollo DevTools will likely receive more enhancements to help developers trace, inspect, and debug GraphQL operations. Future tooling may include visualizations of cache structure, timeline-based performance tracking, and AI-assisted query suggestions. These improvements would reduce debugging time and aid in performance tuning. As applications grow in complexity, observability will become more critical. Robust developer tools are a key focus area for future versions.
7. Smarter Error Handling and Recovery Mechanisms: Future Apollo Client versions are expected to offer more intelligent error handling strategies. This may include automatic retries, better support for partial failures, and customizable recovery flows. Enhanced error classification and separation (network vs. GraphQL errors) will improve user feedback. Developers will be able to configure fallback UIs or retry logic without writing excessive code. These changes will make apps more resilient and user-friendly.
8. Support for Multi-Backend GraphQL Federated Architectures: As GraphQL federation becomes mainstream, Apollo Client will likely add stronger support for multi-backend or federated schemas. Developers will benefit from better tooling to handle multiple data sources seamlessly. Features like dynamic query routing, cross-service caching, and federated error handling may be introduced. This aligns well with enterprise microservices adoption. It will also help frontend teams simplify data access from complex backend systems.
9. AI-Assisted Query Optimization and Suggestions: The integration of AI tools within Apollo’s development experience is on the horizon. Future enhancements may include real-time query optimization, intelligent suggestions, and schema-aware autocomplete. These capabilities will help developers write efficient and error-free queries. AI-driven insights could also detect redundant data requests and propose improvements. This innovation will reduce manual tuning and improve both performance and productivity.
10. Seamless Integration with Server-Side Rendering (SSR) and Edge Functions: Apollo Client is expected to improve its compatibility with SSR frameworks like Next.js, Remix, and edge runtime platforms. Developers will be able to render GraphQL queries at the edge more efficiently, reducing time-to-first-byte (TTFB). Future updates may include automatic query hydration and smarter caching strategies for SSR. This ensures better SEO, faster rendering, and improved UX for modern web apps. Edge-first GraphQL is a major step forward for performance-centric applications.

Conclusion

Apollo Client offers a powerful way to manage client-side GraphQL queries in a predictable, efficient, and scalable manner. With built-in support for caching, real-time updates, pagination, and a robust developer experience, it becomes an essential tool for modern frontend development. By following best practices and using its powerful API correctly, you can build faster, smarter, and more maintainable applications with Apollo Client and GraphQL.

FAQs

Further Reading

• https://www.apollographql.com/docs/react
• https://graphql.org
• https://chromewebstore.google.com/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm?pli=1