Vue.js Assignment– 6

Vue with REST & GraphQL

Basic Questions

  1. Install Axios, configure a base URL and a default timeout in a Vue app.
  2. Create a service module that exposes getUsers() using Axios and render the list.
  3. Add a global Axios request interceptor to attach an Authorization header from localStorage.
  4. Add a global Axios response interceptor to log non-2xx responses to the console.
  5. Build a component that fetches on mounted() and shows loading/error/empty states.
  6. Implement a cancelable Axios request using AbortController and cancel on unmount.
  7. Create an Axios instance that automatically converts snake_case API fields to camelCase.
  8. Add an exponential backoff retry (max 3) for HTTP 429/5xx responses.
  9. Implement a simple in-memory cache for GET requests (keyed by URL + params).
  10. Build a “Retry” button that reissues the last failed Axios request.
  11. Install Apollo Client, set up a ApolloClient with HTTP link and InMemoryCache.
  12. Run a GraphQL query (listPosts) in a component using useQuery and render results.
  13. Show GraphQL loading and error states in the UI.
  14. Use GraphQL variables in a query (e.g., post(id: $id)) and display the record.
  15. Add a GraphQL mutation (createPost) and refetch the listPosts query on success.
  16. Configure Apollo cache typePolicies with a stable keyFields for Post.
  17. Add a button to manually refetch() a query and confirm UI updates.
  18. Create a simple GraphQL fragment and reuse it in two queries.
  19. Implement a REST paginated list with page and limit params and next/prev buttons.
  20. Add basic client-side rate limiting by delaying REST calls using setTimeout between requests.

Intermediate Questions

  1. Build a composable useAxios() that returns { data, error, loading, request } with cancellation support.
  2. Add Axios request deduplication: if the same GET is in flight, reuse the promise.
  3. Implement a 401 handler: intercept 401, refresh token via /auth/refresh, retry the original request.
  4. Add Axios per-request retry config (e.g., { retry: 2, retryDelay: 500 }) and honor it in the interceptor.
  5. Create a REST list with server-driven pagination (reads Link headers) and renders numbered pages.
  6. Implement infinite scroll for a REST endpoint using an IntersectionObserver.
  7. Enforce client-side rate limit for REST (token bucket: 5 req/second) using a small queue.
  8. Handle REST batch fetching: request multiple IDs in chunks and merge results in the store.
  9. Configure Apollo split link for HTTP queries/mutations and WebSocket for subscriptions.
  10. Implement a GraphQL subscription (onPostAdded) and append incoming items to the list.
  11. Use Apollo cache read/merge functions to do cursor-based pagination for listPosts.
  12. Implement optimistic UI for a GraphQL likePost mutation with rollback on error.
  13. Add a network status banner that reacts to Apollo’s networkStatus (loading, refetch, poll).
  14. Use Apollo pollInterval to refresh a query every 10s; pause/resume polling on tab visibility.
  15. Add per-operation error handling: map GraphQL errors to field messages in a form.
  16. Implement a useGraphQL() composable that wraps useQuery/useMutation with standardized error, retry, and toast hooks.
  17. Add a REST → GraphQL bridge: call REST, then write results into Apollo cache manually.
  18. Implement backoff and jitter for GraphQL WebSocket reconnect logic.
  19. Add a rate-limit-aware queue for GraphQL mutations (e.g., batching or spacing calls).
  20. Create a side-by-side demo comparing REST and GraphQL pagination (offset vs cursor) with identical UI.

Advanced Questions

  1. Build a request orchestration layer: REST (Axios) + GraphQL (Apollo) with unified caching keys and stale-while-revalidate logic.
  2. Implement circuit breaker for REST: open after N consecutive failures, half-open after delay, close on success.
  3. Add distributed tracing headers to Axios requests and GraphQL operations; verify they propagate.
  4. Implement server-sent events (SSE) fallback when WebSocket subscription fails and unify updates in the store.
  5. Build a rate-limit middleware that reads Retry-After/X-RateLimit-* headers and schedules retries accordingly.
  6. Implement GraphQL persisted queries and verify reduced payload size in devtools.
  7. Create a robust offline-first flow: cache queries, queue mutations, replay on reconnect for both REST and GraphQL.
  8. Add selective normalization in Apollo cache with custom merge for nested lists and compare perf with large datasets.
  9. Build a diagnostics panel showing: last 20 REST calls, last 20 GraphQL ops, retries, backoffs, cache hits, subscription events.
  10. Final Hands-on Project:
      • REST: Axios instance with auth, retries, backoff, dedupe, cache, rate-limit queue, pagination (infinite + numbered)
      • GraphQL: Apollo Client with HTTP+WS split, cache typePolicies, cursor pagination, optimistic mutations, subscriptions, persisted queries
      • Unified composables (useAxios, useGraphQL) with standardized error/retry UX
      • Offline + SWR strategy, diagnostics panel, and performance measurements on large lists