A package to detect unused GraphQL fields
npm install unused-graphql-fieldsunused-graphql-fields is a utility package for detecting unused fields in your GraphQL queries. It provides custom hooks, useTrackedQuery, useTrackedLazyQuery and useTrackedData as alternatives to Apollo Client's hooks. Additionally, the package includes a component, UnusedFieldsViewer and TreeViewRenderer which can be used to visualize the unused fields in your application. Also it provides clearAllEntries function which can be invoked to clear the list of queries from the viewer components.
``sh`
npm install unused-graphql-fieldsEnvironment Setup
To ensure the proper functionality of the hook, it is essential to set up an environment variable named . This variable should be configured to either "development" or "production" based on your current environment.
In your local .env file:
`
NODE_ENV="development"
or
NODE_ENV="production"
For useTrackedQuery
`
import { useTrackedQuery } from 'unused-graphql-fields';
import { gql } from '@apollo/client';
const MY_QUERY = gql
query MyQuery {
field1
field2
field3
};
const MyComponent = () => {
const { data, loading, error } = useTrackedQuery(MY_QUERY);
if (loading) return
Loading...
;Error :(
; return (
Field 1: {data.field1}
Field 2: {data.field2}
For useTrackedLazyQuery
import { useTrackedLazyQuery } from 'unused-graphql-fields';
import { gql } from '@apollo/client';const MY_QUERY = gql
;const MyComponent = () => {
const { getQuery,{loading,data} } = useTrackedLazyQuery(MY_QUERY);
if (loading) return
Loading...
;
if (error) return Error :(
; return (
Field 1: {data.field1}
Field 2: {data.field2}
);
};
`
For useTrackedData
import { useLazyQuery } from "@apollo/client";
import {useTrackedData} from "unused-graphql-fields"const useCustomLazyQuery = function(query,options){
const [getQuery, result] = useLazyQuery(query, options);
const { data } = result;
const proxyData=useTrackedData(data,query);
return [getQuery, { ...result, data: proxyData }];
};
export default useCustomLazyQuery;
To visualize unused fields, include the
component at the top level of your application.
`
import React from 'react';
import { ApolloProvider } from '@apollo/client';
import { client } from './apolloClient'; // assuming you have set up your Apollo Client
import { UnusedFieldsViewer } from 'unused-graphql-fields';
import App from './App';const Root = () => (
);
export default Root;
To visualize unused fields using the TreeViewRenderer component, you can use it like this. Additionally, it accepts an optional prop , which can be set to true or false to show the Clear All button for clearing the list from the viewer component.`
import React from 'react';
import { ApolloProvider } from '@apollo/client';
import { client } from './apolloClient'; // assuming you have set up your Apollo Client
import { TreeViewRenderer } from 'unused-graphql-fields';
import App from './App';const Root = () => (
);
export default Root;