or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

client-access.mdindex.mdmutation-operations.mdquery-operations.mdsubscription-operations.mdtesting-utilities.md
tile.json

tessl/npm-apollo--react-hooks

React hooks for Apollo GraphQL client integration providing useQuery, useLazyQuery, useMutation, useSubscription, and useApolloClient hooks for seamless GraphQL operations.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@apollo/react-hooks@4.0.x

To install, run

npx @tessl/cli install tessl/npm-apollo--react-hooks@4.0.0

index.mddocs/

Apollo React Hooks

Apollo React Hooks is a React integration package for Apollo GraphQL client that provides React hooks for executing GraphQL queries, mutations, and subscriptions. This package is deprecated as of version 4.0.0 and all functionality has been moved to @apollo/client >= 3.0.0. It serves as a complete re-export wrapper around Apollo Client.

Package Information

  • Package Name: @apollo/react-hooks
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @apollo/react-hooks (deprecated - use @apollo/client instead)

Core Imports

import { useQuery, useMutation, useSubscription, useApolloClient } from "@apollo/react-hooks";

For CommonJS:

const { useQuery, useMutation, useSubscription, useApolloClient } = require("@apollo/react-hooks");

Basic Usage

import { useQuery, useMutation, useApolloClient, gql } from "@apollo/react-hooks";

// Define a GraphQL query
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

// Use the hook in a React component
function UsersList() {
  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>
  );
}

Migration Guide

⚠️ Deprecation Notice: This package is deprecated. Migrate to @apollo/client:

// Old (deprecated)
import { useQuery } from "@apollo/react-hooks";

// New (recommended)
import { useQuery } from "@apollo/client";

Architecture

Apollo React Hooks provides several categories of functionality:

  • Query Hooks: Execute GraphQL queries with automatic loading states and caching (useQuery, useLazyQuery)
  • Mutation Hooks: Execute GraphQL mutations with optimistic updates and error handling (useMutation)
  • Subscription Hooks: Handle real-time data via GraphQL subscriptions (useSubscription)
  • Client Access: Direct access to the Apollo Client instance for advanced operations (useApolloClient)
  • Testing Utilities: Mock provider for testing GraphQL operations (MockProvider)

Capabilities

Query Operations

Core hooks for executing GraphQL queries with automatic state management, caching, and loading indicators.

function useQuery<TData, TVariables>(
  query: DocumentNode,
  options?: QueryHookOptions<TData, TVariables>
): QueryResult<TData, TVariables>;

function useLazyQuery<TData, TVariables>(
  query: DocumentNode,
  options?: LazyQueryHookOptions<TData, TVariables>
): [QueryLazyOptions<TData, TVariables>, QueryResult<TData, TVariables>];

Query Operations

Mutation Operations

Execute GraphQL mutations with state management and optimistic updates.

function useMutation<TData, TVariables, TContext, TCache>(
  mutation: DocumentNode,
  options?: MutationHookOptions<TData, TVariables, TContext, TCache>
): MutationTuple<TData, TVariables, TContext, TCache>;

Mutation Operations

Subscription Operations

Handle real-time GraphQL subscriptions for live data updates.

function useSubscription<TData, TVariables>(
  subscription: DocumentNode,
  options?: SubscriptionHookOptions<TData, TVariables>
): SubscriptionResult<TData>;

Subscription Operations

Client Access

Access the Apollo Client instance for advanced operations.

function useApolloClient(): ApolloClient<any>;

Client Access

Testing Utilities

Components and utilities for testing GraphQL operations in React applications.

interface MockProviderProps {
  mocks?: ReadonlyArray<MockedResponse>;
  addTypename?: boolean;
  defaultOptions?: DefaultOptions;
  cache?: ApolloCache<any>;
  resolvers?: Resolvers;
  childProps?: object;
  children?: React.ReactElement;
  showWarnings?: boolean;
}

declare const MockProvider: React.ComponentType<MockProviderProps>;

Testing Utilities

Types

interface QueryResult<TData, TVariables> {
  loading: boolean;
  error?: ApolloError;
  data?: TData;
  refetch: (variables?: Partial<TVariables>) => Promise<ApolloQueryResult<TData>>;
  fetchMore: <K extends keyof TVariables>(
    fetchMoreOptions: FetchMoreQueryOptions<TVariables, K> & FetchMoreOptions<TData, TVariables>
  ) => Promise<ApolloQueryResult<TData>>;
  networkStatus: NetworkStatus;
  called: boolean;
  client: ApolloClient<any>;
  startPolling: (pollInterval: number) => void;
  stopPolling: () => void;
  subscribeToMore: <TSubscriptionData, TSubscriptionVariables>(
    options: SubscribeToMoreOptions<TData, TSubscriptionVariables, TSubscriptionData>
  ) => () => void;
  updateQuery: (
    mapFn: (previousQueryResult: TData, options: UpdateQueryOptions<TVariables>) => TData
  ) => void;
}

interface MutationTuple<TData, TVariables, TContext, TCache> extends Array<any> {
  0: MutationFunction<TData, TVariables, TContext, TCache>;
  1: MutationResult<TData>;
}

interface MutationResult<TData> {
  data?: TData;
  loading: boolean;
  error?: ApolloError;
  called: boolean;
  client: ApolloClient<any>;
}

interface SubscriptionResult<TData> {
  loading: boolean;
  data?: TData;
  error?: ApolloError;
}