refactor!: rename useRequest to useManualQuery

README.md

@@ -86,7 +86,7 @@ Here how someone would make a request using the [useQuery](#usequery) hook provi
 const { data, error, hasMore, fetchMore, ...rest } = useQuery(/* query */);
 ```
 
-> **Note:** [useRequest](#userequest) hook works the same way as `useQuery` expect it doesn't fetch the request automatically on mount/updates but rather exposes a helper to manually fetch when needed.
+> **Note:** [useManualQuery](#useManualQuery) hook works the same way as `useQuery` expect it doesn't fetch the request automatically on mount/updates but rather exposes a helper to manually fetch when needed.
 
 When resolving a request, Oktane checks the value returned by `clientOptions.fetch(request, ctx)` call and does one of the following based to the type:
 
@@ -139,10 +139,10 @@ function useQuery(query: QueryFunc  | any): {
 }
 ```
 
-#### useRequest
+#### useManualQuery
 
 ```javascript
-function useRequest(query: any): {
+function useManualQuery(query: any): {
   fetch: () => void;
   cancel: () => void;
   refetch: () => void;

src/index.ts

@@ -7,7 +7,7 @@ export { Client, createClient } from './client';
 export { Request, createRequest } from './request';
 
 // React
-export { useQuery, useRequest } from './react/fetchers';
+export { useQuery, useManualQuery } from './react/query';
 export { useClient, ClientProvider } from './react/useClient';
 
 // Typings

src/react/fetchers.test.tsx → src/react/query.test.tsx

@@ -9,7 +9,7 @@ import { createClient } from '../client';
 import { createRequest } from '../request';
 import { ClientProvider } from './useClient';
 import { wrap, spyOnFetch } from './test/utils';
-import { useQuery, useRequest } from './fetchers';
+import { useQuery, useManualQuery } from './query';
 
 // @ts-ignore
 global.__DEV__ = true;
@@ -296,12 +296,12 @@ describe('useQuery', () => {
 	});
 });
 
-describe('useRequest', () => {
+describe('useManualQuery', () => {
 	test('should only fetch on .fetch() call', async () => {
 		const client = createClient({ fetch });
 
 		const Example = wrap(() => {
-			const { status, data, fetch } = useRequest('/api');
+			const { status, data, fetch } = useManualQuery('/api');
 
 			return (
 				<>
@@ -330,7 +330,7 @@ describe('useRequest', () => {
 	test('should throw if query is a function', () => {
 		const client = createClient({ fetch });
 
-		const { result } = renderHook(() => useRequest(() => '/api'), {
+		const { result } = renderHook(() => useManualQuery(() => '/api'), {
 			wrapper: ({ children }) => (
 				<ClientProvider value={client}>{children}</ClientProvider>
 			),

src/react/fetchers.ts → src/react/query.ts

@@ -7,26 +7,26 @@ import is from '../utils/is';
 import { Client } from '../client';
 import { Result } from '../utils/cache';
 import { useClient } from './useClient';
-import { useStableRequest } from './useStableRequest';
+import { useRequest } from './useRequest';
 
-interface FetchOperations {
+interface QueryOperations {
 	fetch?: () => void;
 	cancel: () => void;
 	refetch: () => void;
 	hasMore: () => boolean;
 	fetchMore: () => void;
 }
 
-function createFetcher(
+function createQueryHook(
 	manual: false
-): (query: any) => Result & Omit<FetchOperations, 'fetch'>;
-function createFetcher(
+): (query: any) => Result & Omit<QueryOperations, 'fetch'>;
+function createQueryHook(
 	manual: true
-): (query: any) => Result & Required<FetchOperations>;
-function createFetcher(manual: boolean) {
+): (query: any) => Result & Required<QueryOperations>;
+function createQueryHook(manual: boolean) {
 	return (query: any) => {
 		if (manual && is.func(query)) {
-			throw new Error('useRequest() does not accept a function');
+			throw new Error('useManualQuery() does not accept a function');
 		}
 
 		// Fetch response
@@ -38,7 +38,7 @@ function createFetcher(manual: boolean) {
 		const fns = React.useRef<ReturnType<Client['fetch']>>(null);
 
 		const client = useClient();
-		const request = useStableRequest(query);
+		const request = useRequest(query);
 
 		const fetch = React.useCallback(() => {
 			// bail out if request is not ready
@@ -95,7 +95,7 @@ function createFetcher(manual: boolean) {
 		}, [fetch]);
 
 		// Exposed interface
-		const exposed: Result & FetchOperations = {
+		const exposed: Result & QueryOperations = {
 			...response,
 			cancel,
 			refetch,
@@ -111,5 +111,5 @@ function createFetcher(manual: boolean) {
 	};
 }
 
-export const useQuery = createFetcher(false);
-export const useRequest = createFetcher(true);
+export const useQuery = createQueryHook(false);
+export const useManualQuery = createQueryHook(true);

src/react/useStableRequest.test.ts → src/react/useRequest.test.ts

@@ -2,12 +2,10 @@
 import { renderHook } from '@testing-library/react-hooks';
 
 // Ours
-import { useStableRequest } from './useStableRequest';
+import { useRequest } from './useRequest';
 
 test('should return undefined if query is falsy', () => {
-	const { result, rerender } = renderHook((query) =>
-		useStableRequest(query)
-	);
+	const { result, rerender } = renderHook((query) => useRequest(query));
 
 	expect(result.current).toEqual(undefined);
 
@@ -24,7 +22,7 @@ test('should preserve object if id has not changed', () => {
 	};
 
 	const { result, rerender } = renderHook(
-		({ query }) => useStableRequest(query),
+		({ query }) => useRequest(query),
 		{ initialProps: { query } }
 	);
 
@@ -56,9 +54,7 @@ test('should preserve object if id has not changed', () => {
 
 test('should not fail if error is thrown when resolving query', () => {
 	const request: any = null;
-	const { result } = renderHook(() =>
-		useStableRequest(() => request.query)
-	);
+	const { result } = renderHook(() => useRequest(() => request.query));
 
 	expect(result.current).toEqual(undefined);
 	expect(result.error).toEqual(undefined);

src/react/useStableRequest.ts → src/react/useRequest.ts

@@ -5,7 +5,7 @@ import { useRef, useMemo } from 'react';
 import is from '../utils/is';
 import { createRequest, Request } from '../request';
 
-export function useStableRequest(query: any): Request {
+export function useRequest(query: any): Request {
 	const prev = useRef<Request>(undefined);
 
 	return useMemo(() => {