API Integration Architect

API Integration Architect

Expert skill for integrating APIs in React applications. Specializes in React Query, SWR, GraphQL, WebSockets, caching strategies, and optimistic updates.

Core Capabilities

1. Data Fetching Libraries

• React Query (TanStack Query): Powerful async state management
• SWR: Stale-while-revalidate strategy
• RTK Query: Redux Toolkit integration
• Apollo Client: GraphQL client
• Axios/Fetch: HTTP clients

2. REST API Integration

• GET Requests: Fetch data
• POST/PUT/PATCH: Create/update data
• DELETE: Remove data
• Query Parameters: Filtering, pagination
• Headers: Authentication, content-type
• Error Handling: Network errors, HTTP errors

3. GraphQL Integration

• Queries: Fetch data with GraphQL
• Mutations: Modify data
• Subscriptions: Real-time updates
• Fragments: Reusable query parts
• Code Generation: Type-safe queries
• Caching: Normalized cache

4. Real-Time Communication

• WebSocket: Bidirectional communication
• Server-Sent Events: One-way server push
• Polling: Interval-based updates
• Long Polling: Efficient polling
• Socket.io: WebSocket library

5. Caching & Optimization

• Cache Strategies: Fresh, stale, refetch
• Background Refetch: Update in background
• Cache Invalidation: Smart cache updates
• Prefetching: Load before needed
• Pagination: Infinite scroll, load more
• Deduplication: Avoid duplicate requests

6. Optimistic Updates

• Immediate UI: Update before server response
• Rollback: Undo on error
• Pessimistic Updates: Wait for server
• Concurrent Updates: Handle conflicts
• Offline Support: Queue mutations

React Query Setup

// queryClient.ts
import { QueryClient } from '@tanstack/react-query'

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      cacheTime: 10 * 60 * 1000, // 10 minutes
      refetchOnWindowFocus: false,
      retry: 1,
    },
  },
})

// App.tsx
import { QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

API Client

// api/client.ts
import axios from 'axios'

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
})

// Request interceptor
apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => Promise.reject(error)
)

// Response interceptor
apiClient.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response?.status === 401) {
      // Handle unauthorized
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

export default apiClient

React Query Patterns

// hooks/useUser.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import apiClient from '@/api/client'

interface User {
  id: string
  name: string
  email: string
}

// Fetch user
export function useUser(userId: string) {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: () => apiClient.get<User>(`/users/${userId}`),
    enabled: !!userId,
  })
}

// Update user
export function useUpdateUser() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: (data: Partial<User> & { id: string }) =>
      apiClient.put(`/users/${data.id}`, data),

    // Optimistic update
    onMutate: async (newUser) => {
      await queryClient.cancelQueries({ queryKey: ['user', newUser.id] })
      const previousUser = queryClient.getQueryData(['user', newUser.id])
      queryClient.setQueryData(['user', newUser.id], newUser)
      return { previousUser }
    },

    onError: (err, newUser, context) => {
      queryClient.setQueryData(['user', newUser.id], context?.previousUser)
    },

    onSettled: (data, error, variables) => {
      queryClient.invalidateQueries({ queryKey: ['user', variables.id] })
    },
  })
}

GraphQL with Apollo

// apollo-client.ts
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'
import { setContext } from '@apollo/client/link/context'

const httpLink = createHttpLink({
  uri: process.env.REACT_APP_GRAPHQL_URL,
})

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('token')
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  }
})

export const apolloClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})

// Usage
import { useQuery, useMutation, gql } from '@apollo/client'

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

function UserProfile({ userId }: { userId: string }) {
  const { data, loading, error } = useQuery(GET_USER, {
    variables: { id: userId },
  })

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return <div>{data.user.name}</div>
}

WebSocket Integration

// hooks/useWebSocket.ts
import { useEffect, useState, useRef } from 'react'

export function useWebSocket<T>(url: string) {
  const [data, setData] = useState<T | null>(null)
  const [error, setError] = useState<Event | null>(null)
  const ws = useRef<WebSocket | null>(null)

  useEffect(() => {
    ws.current = new WebSocket(url)

    ws.current.onmessage = (event) => {
      setData(JSON.parse(event.data))
    }

    ws.current.onerror = (error) => {
      setError(error)
    }

    return () => {
      ws.current?.close()
    }
  }, [url])

  const send = (message: any) => {
    ws.current?.send(JSON.stringify(message))
  }

  return { data, error, send }
}

Infinite Scroll

// hooks/useInfiniteScroll.ts
import { useInfiniteQuery } from '@tanstack/react-query'
import apiClient from '@/api/client'

export function useInfinitePosts() {
  return useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam = 1 }) =>
      apiClient.get(`/posts?page=${pageParam}`),
    getNextPageParam: (lastPage, pages) => {
      return lastPage.hasMore ? pages.length + 1 : undefined
    },
  })
}

// Component
function PostList() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfinitePosts()

  return (
    <div>
      {data?.pages.map((page) =>
        page.posts.map((post) => <Post key={post.id} {...post} />)
      )}

      {hasNextPage && (
        <button => fetchNextPage()} disabled={isFetchingNextPage}>
          {isFetchingNextPage ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  )
}

Best Practices

• Type-safe APIs with TypeScript
• Error boundaries for API errors
• Loading and error states
• Optimistic updates for better UX
• Cache invalidation strategies
• Request deduplication
• Retry failed requests
• Authentication handling

When to Use This Skill

Use when you need to:

• Integrate REST or GraphQL APIs
• Set up React Query or SWR
• Implement real-time updates
• Add optimistic updates
• Handle pagination/infinite scroll
• Manage API caching
• Build offline-capable apps

Output Format

Provide:

1. API Client Setup: Axios/Fetch configuration
2. Query Hooks: Type-safe data fetching
3. Mutation Hooks: Data modification
4. Caching Strategy: How data is cached
5. Error Handling: Error boundaries and fallbacks
6. Testing: API mocking and tests