useQuery — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/useQuerymedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

JavaScript interview question

useQuery

medium15 min

Implement useQuery(url, onChange?) as a framework-independent function that fetches JSON and returns the current data, loading, and error states.

This is a plain JavaScript/TypeScript function, not a React Hook or a TanStack Query clone. Open usage-examples.md in the editor for JavaScript, TypeScript, React, Vue, and Angular usage examples.

Requirements

Return synchronously with a live state object: { data: null, loading: true, error: null }. Do not return a Promise.
Start one GET request using fetch(url). Update the same returned state object as the request completes.
Check response.ok before parsing JSON. For a failed HTTP response, set error to an Error with message HTTP <status>, keep data null, and set loading false.
On success, assign the JSON payload to data without changing falsy values, set loading false, and keep error null.
Catch network errors, JSON parsing errors, and synchronous fetch failures. Normalize non-Error failures with new Error(String(reason)); always end loading.
Keep loading true until response.json() settles, not just until response headers arrive.
If supplied, call onChange once after completion with a snapshot of all three settled states, for both success and failure. The callback is optional and assumed not to throw.
Each invocation has independent state. Do not share state between simultaneous requests.
TypeScript must support useQuery<T>() with data: T | null, loading: boolean, and error: Error | null.
Assume a valid URL string and a JSON API. Caching, retries, refetch, cancellation, deduplication, and runtime payload validation are out of scope.
Use the framework adapters in usage-examples.md to copy callback snapshots into reactive state; this function does not automatically trigger framework rendering.

Examples

Example 1

Input: Call useQuery("/api/users")
Output: { data: null, loading: true, error: null } immediately.

Example 2

Input: HTTP 200 with JSON [{ id: 1 }]
Output: { data: [{ id: 1 }], loading: false, error: null } after completion.

Example 3

Input: HTTP 404
Output: { data: null, loading: false, error: Error("HTTP 404") } after completion.

Example 4

Input: Network rejection Error("Offline")
Output: { data: null, loading: false, error: Error("Offline") } after completion.

useQuery(url, onChange?) returns a live state object immediately. onChange receives one settled snapshot. Usage examples are supplied as a readable editor file. Tests mock fetch; no real API is called.

What the tests check

Returns loading state immediately and fetches the supplied URL once
Publishes JSON data and clears loading
Rejects unsuccessful HTTP status without parsing the body
Handles network rejection
Handles malformed JSON
Preserves falsy and null JSON payloads
Notifies the callback once with settled state
Notifies the callback on failure
Independent concurrent queries can finish out of order
Remains loading until JSON parsing finishes
Normalizes non-Error failures and synchronous fetch throws

References

Using Fetch React useEffect Vue composables Angular signals

AsyncAPIFunctionsPromisesFetchError handlingState transitions

Back

Preparing your workspace…