The Great JavaScript Hook Naming Crisis: An Appeal for Sanity

useQuery - from '@apollo/client'         // GraphQL queries

useQuery - from 'urql'                   // Also GraphQL

useQuery - from '@tanstack/react-query'  // REST/HTTP queries

useQuery - from 'react-relay'            // GraphQL with Relay

useQuery - from 'graphql-hooks'          // More GraphQL

useQuery - from '@supabase/react'        // Database queries

useQuery - from 'react-firebase-hooks'   // Firestore queries

useQuery - from '@algolia/react-hooks'   // Search queries

useQuery - from 'swr'                    // HTTP data fetching

useQuery - from... dear god, make it stop

// GraphQL query

const { data } = useQuery(gql`

  query GetUser($id: ID!) {

    user(id: $id) { name, email }

  }

`);



// REST API query

const { data } = useQuery(['user', id], 

  () => fetch(`/api/users/${id}`)

);



// Database query

const { data } = useQuery(

  supabase.from('users').select('*').eq('id', id)

);



// Search query

const { data } = useQuery('users', {

  query: 'John',

  filters: 'role:admin'

});



// Firestore query  

const { data } = useQuery(

  collection(firestore, 'users'),

  where('active', '==', true)

);

// 🤯 Actual imports from a real project

import { useQuery as useGraphQLQuery } from '@apollo/client';

import { useQuery as useRESTQuery } from '@tanstack/react-query';

import { useQuery as useFirestoreQuery } from 'react-firebase-hooks/firestore';

import { useQuery as useSupabaseQuery } from '@supabase/react';

import { useMutation as useGraphQLMutation } from 'urql';

import { useMutation as useRESTMutation } from '@tanstack/react-query';

import { useClient as useGraphQLClient } from '@apollo/client';

import { useClient as useSupabaseClient } from '@supabase/auth-helpers-react';

import { useAuth as useFirebaseAuth } from 'react-firebase-hooks/auth';

import { useAuth as useClerkAuth } from '@clerk/nextjs';

import { useAuth as useAuth0 } from '@auth0/nextjs-auth0';

// Vue libraries with conflicting names

import { useQuery } from '@vue/apollo-composable';

import { useQuery } from '@tanstack/vue-query';

import { useQuery } from 'villus';

import { useQuery } from '@urql/vue';

// Solid libraries joining the chaos

import { useQuery } from 'solid-urql';

import { useQuery } from '@tanstack/solid-query';

// Authentication hooks

useAuth - from '@clerk/nextjs'

useAuth - from '@auth0/nextjs-auth0'

useAuth - from 'react-firebase-hooks'

useAuth - from '@supabase/auth-helpers'

useAuth - from 'next-auth/react'



// Client/connection hooks

useClient - from 'urql'

useClient - from '@apollo/client'

useClient - from '@supabase/react'

useClient - from 'graphql-hooks'



// Store/state hooks

useStore - from 'zustand'

useStore - from 'valtio'

useStore - from 'jotai'

useStore - from 'nanostores'



// Subscription hooks

useSubscription - from '@apollo/client'

useSubscription - from 'urql'

useSubscription - from '@supabase/react'

useSubscription - from 'react-relay'

// Developer meant to use REST query but auto-import grabbed GraphQL

import { useQuery } from '@apollo/client'; // 😱



function UserList() {

  // This will crash at runtime with cryptic errors

  const { data } = useQuery('/api/users', fetchUsers);

}

// Before: Using Apollo

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



// After: Switching to urql

import { useQuery } from 'urql';



// But wait! You also have React Query in the same file

// Which useQuery was which? Time to audit everything! 🕵️‍♂️

// A real component that needs data from multiple sources

function Dashboard() {

  // GraphQL for user data

  const { data: userData } = useQuery(GET_USER);



  // REST for analytics

  const { data: analytics } = useQuery(['analytics'], fetchAnalytics);



  // Firestore for real-time updates

  const [messages] = useQuery(messagesQuery);



  // Which useQuery is which? 🤷‍♂️

  // Spoiler: They imported the wrong one for analytics

}

// TypeScript tries to help but makes it worse

const { data } = useQuery(/* ... */);

// Type error: Argument of type 'DocumentNode' is not assignable to parameter of type 'QueryKey'



// Translation: You imported React Query instead of Apollo 🤦‍♂️

// "Our useQuery is the most elegant!" - Every library author

const { data } = useQuery(key, fetcher, options);

// "Works with any framework!" 

export function useQuery() { /* ... */ }

   // ❌ Bad: Generic names

   export { useQuery, useMutation, useClient };



   // ✅ Good: Prefixed names

   export { useApolloQuery, useApolloMutation, useApolloClient };

   // ❌ Bad: What kind of query?

   export { useQuery };



   // ✅ Good: Clear query type

   export { useGraphQLQuery };  // Apollo, urql

   export { useHTTPQuery };     // React Query, SWR  

   export { useDBQuery };       // Supabase, Firebase

   export { useSearchQuery };   // Algolia, ElasticSearch

   // ❌ Bad: Inconsistent naming

   export { 

     useQuery,          // Generic

     apolloClient,      // Prefixed differently

     createMutation     // Different pattern

   };



   // ✅ Good: Consistent pattern

   export { 

     useApolloQuery,

     useApolloClient,

     useApolloMutation

   };

// New prefixed exports (default)

export { 

  useTanStackQuery,

  useTanStackMutation,

  useTanStackQueryClient 

} from './hooks';



// Legacy exports (deprecated)

export { 

  useTanStackQuery as useQuery,

  useTanStackMutation as useMutation,

  useTanStackQueryClient as useQueryClient

} from './hooks/legacy';

   npx @your-lib/codemod add-prefixes

// Future: Framework-level namespacing?

import * as Apollo from '@apollo/client/hooks';

import * as TanStack from '@tanstack/react-query/hooks';



Apollo.useQuery();

TanStack.useQuery();