npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

apollo-inspector

v1.17.10

Published

Tool to track apollo client operations

Downloads

670

Readme

What is Apollo-Inspector

Tool to track all graphql request being executed by Apollo-client.

Why

When a view is rendered, it might make multiple queries to fetch the data. In the network tab, one would only see the requests which actually went to Graphql server. With this tool, one can also see the requests which got resolved from the apollo-cache. This tools also helps to determine, due to what operation, a watch query is re-rendered.

Usage

Create a instance of ApolloInspector and pass an array of IApolloClientObject to it. Calling the instance method startTrackingSubscription with IInspectorObservableTrackingConfig object will start recording all operations being executed by the apollo-clients.

One can use the apollo-inspector-ui package which integrates this library and provides a UI for it.

const mainApolloClient = new ApolloClient(...mainConfig);
const userApolloClient = new ApolloClient(...mainConfig);
.
.
.
const inspector = new ApolloInspector([
    { clientId: "main", client: mainApolloClient },
    { clientId: "user", client: userApolloClient },
  ]);
const observable = inspector.startTrackingSubscription();

observable.subscribe({
  next: (data: IDataView) => {
    // business logic
  },
  error: () => {},
  complete: () => {},
});

The startTrackingSubscription method accepts a config of type IInspectorObservableTrackingConfig.

interface IInspectorObservableTrackingConfig {
  hooks?: IHook[];
  apolloClientIds: string[];
  enableDebugger?: boolean;
  delayOperationsEmitByInMS?: number;
}

Here hooks: These are interceptor where one can transform data from one type to another type apolloClientIds: Pass an array of clientIds which needs to be tracked. These clientIds should be delayOperationsEmitByInMS:

interface IDataView {
  operations: IOperation[] | null;
  verboseOperations: IVerboseOperation[] | null;
}

One can read the list of operations from operations/verboseOperations.

For each verboseOperation/operations, one can see all the below details For most of the cases, one only need operations list

interface IVerboseOperation {
  affectedQueries: DocumentNode[]; // Re-rendered queries due to result of this operation
  affectedQueriesDueToOptimisticResponse?: DocumentNode[];
  cacheSnapshot: unknown;
  clientId: string;
  duration?: IVerboseOperationDuration | undefined; // amount of time spent in each phase
  error: unknown; // Error object in case of failure
  fetchPolicy: WatchQueryFetchPolicy | undefined;
  id: number; // operationId
  isActive?: boolean;
  isOptimistic?: boolean;
  operationName: string | undefined; // Name of operation
  operationString: string;
  operationType: OperationType; // Type of operation, whether its qquery, mutation, subscription
  optimisticResult?: IOperationResult;
  relatedOperations: IRelatedOperation;
  result: IOperationResult[]; // results of the operation.
  status: OperationStatus;
  timing: ITiming | undefined; // Time information relative to start recording at 0 seconds
  variables: OperationVariables | undefined;
  warning: unknown[] | undefined; // apollo client internal warning while reading data from cache
}

What kind of issues can be debugged using the tool

  • Helps figuring out unwanted operations being fired in render phase
  • Help in figuring out the reasons for multiple re-renders of the same watch query​
  • Help figuring out issues with conflicting queries​
  • Shows field name in case missing field error
  • Detailed time info lets you figure out if queries are being fired in Waterfall model or not.
  • Helps figuring out if data is taking too much time to get written to cache.
  • Shows why an operation failed