Client Access

/**
 * Access the Apollo Client instance within React components
 * @returns Apollo Client instance
 */
function useApolloClient(): ApolloClient<any>;

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

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function UserActions({ userId }: { userId: string }) {
  const client = useApolloClient();

  const refreshUser = async () => {
    try {
      await client.refetchQueries({
        include: [GET_USER],
        variables: { id: userId },
      });
    } catch (error) {
      console.error("Failed to refresh user:", error);
    }
  };

  const clearUserCache = () => {
    client.cache.evict({
      id: client.cache.identify({ __typename: "User", id: userId }),
    });
    client.cache.gc();
  };

  const writeUserToCache = (userData: any) => {
    client.cache.writeQuery({
      query: GET_USER,
      variables: { id: userId },
      data: { user: userData },
    });
  };

  return (
    <div className="user-actions">
      <button onClick={refreshUser}>Refresh User</button>
      <button onClick={clearUserCache}>Clear Cache</button>
      <button onClick={() => writeUserToCache({ 
        id: userId, 
        name: "Updated Name", 
        email: "new@example.com" 
      })}>
        Update Cache
      </button>
    </div>
  );
}

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

const SEARCH_USERS = gql`
  query SearchUsers($query: String!) {
    searchUsers(query: $query) {
      id
      name
      email
    }
  }
`;

function UserSearch() {
  const client = useApolloClient();

  const performSearch = async (searchTerm: string) => {
    try {
      const { data } = await client.query({
        query: SEARCH_USERS,
        variables: { query: searchTerm },
        fetchPolicy: "network-only", // Skip cache
      });
      
      return data.searchUsers;
    } catch (error) {
      console.error("Search failed:", error);
      return [];
    }
  };

  const performMutation = async (userData: any) => {
    const CREATE_USER = gql`
      mutation CreateUser($input: CreateUserInput!) {
        createUser(input: $input) {
          id
          name
          email
        }
      }
    `;

    try {
      const { data } = await client.mutate({
        mutation: CREATE_USER,
        variables: { input: userData },
      });
      
      return data.createUser;
    } catch (error) {
      console.error("Mutation failed:", error);
      throw error;
    }
  };

  return (
    <div className="user-search">
      <button onClick={() => performSearch("john")}>
        Search Users
      </button>
      <button onClick={() => performMutation({ name: "New User", email: "new@example.com" })}>
        Create User
      </button>
    </div>
  );
}

interface ApolloClient<TStore> {
  /** Execute a GraphQL query */
  query<T = any, TVariables = OperationVariables>(options: QueryOptions<TVariables, T>): Promise<ApolloQueryResult<T>>;
  
  /** Execute a GraphQL mutation */
  mutate<TData = any, TVariables = OperationVariables, TContext = DefaultContext, TCache = ApolloCache<any>>(
    options: MutationOptions<TData, TVariables, TContext, TCache>
  ): Promise<FetchResult<TData>>;
  
  /** Execute a GraphQL subscription */
  subscribe<T = any, TVariables = OperationVariables>(options: SubscriptionOptions<TVariables, T>): Observable<FetchResult<T>>;
  
  /** Refetch queries */
  refetchQueries(options: RefetchQueriesOptions): Promise<ApolloQueryResult<any>[]>;
  
  /** Reset store */
  resetStore(): Promise<ApolloQueryResult<any>[]>;
  
  /** Clear store */
  clearStore(): Promise<any[]>;
  
  /** Access cache */
  cache: ApolloCache<TStore>;
  
  /** Access link */
  link: ApolloLink;
}

interface QueryOptions<TVariables, TData> {
  query: DocumentNode;
  variables?: TVariables;
  fetchPolicy?: FetchPolicy;
  errorPolicy?: ErrorPolicy;
  context?: DefaultContext;
}

interface RefetchQueriesOptions {
  include?: RefetchQueriesInclude;
  variables?: Record<string, any>;
  onQueryUpdated?: (observableQuery: ObservableQuery<any>) => boolean | TResult;
}

type RefetchQueriesInclude = 
  | Array<string | DocumentNode>
  | "all" 
  | "active";