diff --git a/README.md b/README.md index 26afc35..1c44ce6 100644 --- a/README.md +++ b/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; diff --git a/src/index.ts b/src/index.ts index 9379ebb..0dfd95b 100644 --- a/src/index.ts +++ b/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 diff --git a/src/react/fetchers.test.tsx b/src/react/query.test.tsx similarity index 97% rename from src/react/fetchers.test.tsx rename to src/react/query.test.tsx index 9a8a109..e36bf83 100644 --- a/src/react/fetchers.test.tsx +++ b/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 }) => ( {children} ), diff --git a/src/react/fetchers.ts b/src/react/query.ts similarity index 78% rename from src/react/fetchers.ts rename to src/react/query.ts index f305cb0..ac7b28f 100644 --- a/src/react/fetchers.ts +++ b/src/react/query.ts @@ -7,9 +7,9 @@ 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; @@ -17,16 +17,16 @@ interface FetchOperations { fetchMore: () => void; } -function createFetcher( +function createQueryHook( manual: false -): (query: any) => Result & Omit; -function createFetcher( +): (query: any) => Result & Omit; +function createQueryHook( manual: true -): (query: any) => Result & Required; -function createFetcher(manual: boolean) { +): (query: any) => Result & Required; +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>(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); diff --git a/src/react/useStableRequest.test.ts b/src/react/useRequest.test.ts similarity index 81% rename from src/react/useStableRequest.test.ts rename to src/react/useRequest.test.ts index ff2f5be..3ea5ba9 100644 --- a/src/react/useStableRequest.test.ts +++ b/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); diff --git a/src/react/useStableRequest.ts b/src/react/useRequest.ts similarity index 91% rename from src/react/useStableRequest.ts rename to src/react/useRequest.ts index 82fc33b..537ae2d 100644 --- a/src/react/useStableRequest.ts +++ b/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(undefined); return useMemo(() => {