Simple and efficient library that empowers you to effortlessly handle HTTP requests in your React/React Native applications. It leverages the power of the widely-used react-query and axios libraries, providing a robust set of hooks that streamline the process of fetching and managing data in your application.
NPM
npm install react-native-queriesYarn
yarn add react-native-queriesimportReact,{useEffect}from'react';import{QueriesProvider,useQueryClient,useQueryConfig,useGet,useInfiniteGet,usePost,usePut,usePatch,useDelete,parseConfigURL,}from'react-native-queries';/** * Fake Post */constuseFakePost=(id,options)=>{const[fakePostConfig]=useQueryConfig('jsonplaceholder','fakePost');returnuseGet({key: ['FAKE_POST',id],
...parseConfigURL(fakePostConfig,{ id }),},options);};/** * Fake Posts */constuseFakePosts=(options)=>{const[fakePostsConfig]=useQueryConfig('jsonplaceholder','fakePosts');returnuseGet({key: ['FAKE_POSTS'],
...fakePostsConfig,},options);};/** * Filtered Fake Posts */constuseFilteredFakePosts=(userId,options)=>{const[filteredFakePostsConfig]=useQueryConfig('jsonplaceholder','filteredFakePosts');returnuseGet({key: ['FILTERED_FAKE_POSTS',userId],
...parseConfigURL(filteredFakePostsConfig,{ userId }),},options);};/** * Fake Posts Pages */constuseFakePostsPages=(options)=>{const[fakePostsPagesConfig]=useQueryConfig('jsonplaceholder','fakePostsPages');returnuseInfiniteGet({key: ['FAKE_POSTS_PAGES'],pageParam: 1,pageSize: 10,
...fakePostsPagesConfig,},options);};/** * Create Fake Post */constuseCreateFakePost=(options)=>{const[createFakePostConfig]=useQueryConfig('jsonplaceholder','createFakePost');returnusePost(createFakePostConfig,options);};/** * Update Fake Post */constuseUpdateFakePost=(id,options)=>{const[updateFakePostConfig]=useQueryConfig('jsonplaceholder','updateFakePost');returnusePut(parseConfigURL(updateFakePostConfig,{ id }),options);};/** * Patch Fake Post */constusePatchFakePost=(id,options)=>{const[patchFakePostConfig]=useQueryConfig('jsonplaceholder','patchFakePost');returnusePatch(parseConfigURL(patchFakePostConfig,{ id }),options);};/** * Delete Fake Post */constuseDeleteFakePost=(options)=>{const[deleteFakePostConfig]=useQueryConfig('jsonplaceholder','deleteFakePost');returnuseDelete(deleteFakePostConfig,options);};constContent=()=>{constqueryClient=useQueryClient();useFakePost(1,{onSuccess: (data)=>{console.log('fakePostData: ',data);},});useFakePosts({onSuccess: (data)=>{console.log('fakePostsData: ',data);},});constfilteredFakePosts=useFilteredFakePosts(1);constfakePostsPages=useFakePostsPages({onSuccess: (data)=>{console.log('fakePostsPagesData: ',data);},});useEffect(()=>{console.log('filteredFakePostsData: ',filteredFakePosts.data);},[filteredFakePosts.data]);constcreateFakePost=useCreateFakePost({onSuccess: (data)=>{console.log('createFakePostData: ',data);//refresh FilteredFakePosts and FakePosts queriesqueryClient.invalidateQueries({queryKey: ['FILTERED_FAKE_POSTS','FAKE_POSTS'],});},});constupdateFakePost=useUpdateFakePost(1,{onSuccess: (data)=>{console.log('updateFakePostData: ',data);//refresh FakePost queryqueryClient.invalidateQueries({queryKey: ['FAKE_POST']});},});constpatchFakePost=usePatchFakePost(1,{onSuccess: (data)=>{console.log('patchFakePostData: ',data);},});constdeleteFakePost=useDeleteFakePost({onSuccess: (data)=>{console.log('deleteFakePostData: ',data);},});useEffect(()=>{createFakePost.mutate({title: 'foo',body: 'bar',userId: 1,});updateFakePost.mutate({id: 1,title: 'foo',body: 'bar',userId: 1,});patchFakePost.mutate({title: 'foo'});deleteFakePost.mutate({id: 1});// eslint-disable-next-line react-hooks/exhaustive-deps},[]);useEffect(()=>{fakePostsPages.isFetchedAfterMount&&fakePostsPages.fetchNextPage();// eslint-disable-next-line react-hooks/exhaustive-deps},[fakePostsPages.isFetchedAfterMount,fakePostsPages.fetchNextPage]);returnnull;};exportdefaultfunctionApp(){return(<QueriesProviderconfig={{jsonplaceholder: {baseURL: 'https://jsonplaceholder.typicode.com',fakePosts: 'posts',fakePost: 'posts/{{id}}',filteredFakePosts: 'posts?userId={{userId}}',fakePostsPages: 'posts?_page={{pageParam}}&_limit={{pageSize}}',//pageParam(page number here) and pageSize are mandatory, must be added with same name to be able to update query to next page.createFakePost: 'posts',updateFakePost: 'posts/{{id}}',patchFakePost: 'posts/{{id}}',deleteFakePost: 'posts/{{id}}',},}}><Content/></QueriesProvider>);}Typescript
importReact,{useEffect}from'react';import{QueriesProvider,useQueryClient,useQueryConfig,useGet,useInfiniteGet,usePost,usePut,usePatch,useDelete,parseConfigURL,}from'react-native-queries';importtype{UseGetOptions,UseInfiniteGetOptions,UsePostOptions,UsePutOptions,UsePatchOptions,UseDeleteOptions,}from'react-native-queries';/** * Fake Post */interfaceFakePostData{body: string;id: number;title: string;userId: number;}interfaceFakePostError{}constuseFakePost=(id: number,options?: UseGetOptions<FakePostData,FakePostError>)=>{const[fakePostConfig]=useQueryConfig('jsonplaceholder','fakePost');returnuseGet<FakePostData,FakePostError>({key: ['FAKE_POST',id],
...parseConfigURL(fakePostConfig,{ id }),},options);};/** * Fake Posts */typeFakePostsData=FakePostData[];interfaceFakePostsError{}constuseFakePosts=(options?: UseGetOptions<FakePostsData,FakePostsError>)=>{const[fakePostsConfig]=useQueryConfig('jsonplaceholder','fakePosts');returnuseGet<FakePostsData,FakePostsError>({key: ['FAKE_POSTS'],
...fakePostsConfig,},options);};/** * Filtered Fake Posts */typeFilteredFakePostsData=FakePostData[];interfaceFilteredFakePostsError{}constuseFilteredFakePosts=(userId: number,options?: UseGetOptions<FilteredFakePostsData,FilteredFakePostsError>)=>{const[filteredFakePostsConfig]=useQueryConfig('jsonplaceholder','filteredFakePosts');returnuseGet<FilteredFakePostsData,FilteredFakePostsError>({key: ['FILTERED_FAKE_POSTS',userId],
...parseConfigURL(filteredFakePostsConfig,{ userId }),},options);};/** * Fake Posts Pages */typeFakePostsPagesData=FakePostData[];interfaceFakePostsPagesError{}constuseFakePostsPages=(options?: UseInfiniteGetOptions<FakePostsPagesData,FakePostsPagesError>)=>{const[fakePostsPagesConfig]=useQueryConfig('jsonplaceholder','fakePostsPages');returnuseInfiniteGet<FakePostsPagesData,FakePostsPagesError>({key: ['FAKE_POSTS_PAGES'],pageParam: 1,pageSize: 10,
...fakePostsPagesConfig,},options);};/** * Create Fake Post */interfaceCreateFakePostDataextendsFakePostData{}interfaceCreateFakePostError{}interfaceCreateFakePostVariables{title: string;body: string;userId: number;}constuseCreateFakePost=(options?: UsePostOptions<CreateFakePostData,CreateFakePostError,CreateFakePostVariables>)=>{const[createFakePostConfig]=useQueryConfig('jsonplaceholder','createFakePost');returnusePost<CreateFakePostData,CreateFakePostError,CreateFakePostVariables>(createFakePostConfig,options);};/** * Update Fake Post */interfaceUpdateFakePostDataextendsFakePostData{}interfaceUpdateFakePostError{}interfaceUpdateFakePostVariables{title: string;body: string;userId: number;id: number;}constuseUpdateFakePost=(id: number,options?: UsePutOptions<UpdateFakePostData,UpdateFakePostError,UpdateFakePostVariables>)=>{const[updateFakePostConfig]=useQueryConfig('jsonplaceholder','updateFakePost');returnusePut<UpdateFakePostData,UpdateFakePostError,UpdateFakePostVariables>(parseConfigURL(updateFakePostConfig,{ id }),options);};/** * Patch Fake Post */interfacePatchFakePostDataextendsFakePostData{}interfacePatchFakePostError{}interfacePatchFakePostVariables{title: string;}constusePatchFakePost=(id: number,options?: UsePatchOptions<PatchFakePostData,PatchFakePostError,PatchFakePostVariables>)=>{const[patchFakePostConfig]=useQueryConfig('jsonplaceholder','patchFakePost');returnusePatch<PatchFakePostData,PatchFakePostError,PatchFakePostVariables>(parseConfigURL(patchFakePostConfig,{ id }),options);};/** * Delete Fake Post */interfaceDeleteFakePostData{}interfaceDeleteFakePostError{}interfaceDeleteFakePostVariables{id: number;}constuseDeleteFakePost=(options?: UseDeleteOptions<DeleteFakePostData,DeleteFakePostError,DeleteFakePostVariables>)=>{const[deleteFakePostConfig]=useQueryConfig('jsonplaceholder','deleteFakePost');returnuseDelete<DeleteFakePostData,DeleteFakePostError,DeleteFakePostVariables>(deleteFakePostConfig,options);};constContent=()=>{constqueryClient=useQueryClient();useFakePost(1,{onSuccess: (data)=>{console.log('fakePostData: ',data);},});useFakePosts({onSuccess: (data)=>{console.log('fakePostsData: ',data);},});constfilteredFakePosts=useFilteredFakePosts(1);constfakePostsPages=useFakePostsPages({onSuccess: (data)=>{console.log('fakePostsPagesData: ',data);},});useEffect(()=>{console.log('filteredFakePostsData: ',filteredFakePosts.data);},[filteredFakePosts.data]);constcreateFakePost=useCreateFakePost({onSuccess: (data)=>{console.log('createFakePostData: ',data);//refresh FilteredFakePosts and FakePosts queriesqueryClient.invalidateQueries({queryKey: ['FILTERED_FAKE_POSTS','FAKE_POSTS'],});},});constupdateFakePost=useUpdateFakePost(1,{onSuccess: (data)=>{console.log('updateFakePostData: ',data);//refresh FakePost queryqueryClient.invalidateQueries({queryKey: ['FAKE_POST']});},});constpatchFakePost=usePatchFakePost(1,{onSuccess: (data)=>{console.log('patchFakePostData: ',data);},});constdeleteFakePost=useDeleteFakePost({onSuccess: (data)=>{console.log('deleteFakePostData: ',data);},});useEffect(()=>{createFakePost.mutate({title: 'foo',body: 'bar',userId: 1,});updateFakePost.mutate({id: 1,title: 'foo',body: 'bar',userId: 1,});patchFakePost.mutate({title: 'foo'});deleteFakePost.mutate({id: 1});// eslint-disable-next-line react-hooks/exhaustive-deps},[]);useEffect(()=>{fakePostsPages.isFetchedAfterMount&&fakePostsPages.fetchNextPage();// eslint-disable-next-line react-hooks/exhaustive-deps},[fakePostsPages.isFetchedAfterMount,fakePostsPages.fetchNextPage]);returnnull;};exportdefaultfunctionApp(){return(<QueriesProviderconfig={{jsonplaceholder: {baseURL: 'https://jsonplaceholder.typicode.com',fakePosts: 'posts',fakePost: 'posts/{{id}}',filteredFakePosts: 'posts?userId={{userId}}',//pageParam(page number here) and pageSize are mandatory to set,to be able to update query to next page.fakePostsPages: 'posts?_page={{pageParam}}&_limit={{pageSize}}',createFakePost: 'posts',updateFakePost: 'posts/{{id}}',patchFakePost: 'posts/{{id}}',deleteFakePost: 'posts/{{id}}',},}}><Content/></QueriesProvider>);}Main configuration object that represents the structure of queries, start by adding QueriesProvider to your root app and pass config object with the following structure:
/** * Structure */constconfigStructure={['baseURLKey']: {baseURL: 'baseURLValue',requestConfig: AxiosRequestConfig,['URLKey']:
'URLValue'|{url: 'URLValue',requestConfig: AxiosRequestConfig,requestConfigAction: 'MERGE'|'OVERWRITE',},},// more servers...};/** * Example: */constconfig={jsonplaceholder: {baseURL: 'https://jsonplaceholder.typicode.com',//will be applied to all queries except where requestConfigAction is OVERWRITErequestConfig: {headers: {sharedHeader: '...',},},fakePosts: 'posts',fakePost: 'posts/{{id}}',filteredFakePosts: {url: 'posts?userId={{userId}}'},createFakePost: {url: 'posts'},updateFakePost: {url: 'posts/{{id}}',requestConfigAction: 'OVERWRITE',//will overwrite baseURL requestConfigrequestConfig: {headers: {specificHeader1: '...',},},},patchFakePost: {url: 'posts/{{id}}',//will be merged with baseURL requestConfig, since requestConfigAction default is MERGE//ex: requestConfig: { headers: { specificHeader2: '...' , sharedHeader: '...'}}requestConfig: {headers: {specificHeader2: '...',},},},deleteFakePost: 'posts/{{id}}',},jsonplaceholder2: {//...},};constApp=()=>{return<QueriesProviderconfig={config}>...</QueriesProvider>;};Typescript
interfaceConfig{[baseURLKey: string]: {baseURL: string;requestConfig: AxiosRequestConfig;[URLKey: string]:
|string|{url: string;requestConfig: AxiosRequestConfig;requestConfigAction?: 'MERGE'|'OVERWRITE';};};}- baseURLKey: Name of the server.
- baseURLValue: Base server URL that will be prepended to every URLValue.
- requestConfig:AxiosRequestConfig to use with every query, except baseURL, url and method.
- URLKey: Name of URL(endpoint).
- URLValue: API URL(endpoint).
- requestConfigAction: The action to take with the base requestConfig, default is MERGE.
Hook to get and update query config.
const[queryConfig,setQueryConfig]=useQueryConfig('baseURLKey','URLKey');const{ baseURL, url, requestConfig }=queryConfig;setQueryConfig({requestConfig: {//...},});/** * Example: */importReact,{useEffect}from'react';import{QueriesProvider,useQueryConfig}from'react-native-queries';constContent=()=>{//Access shared queries configconst[jsonplaceholderConfig,setJsonplaceholderConfig]=useQueryConfig('jsonplaceholder');//Access specific query configconst[createFakePostConfig,setCreateFakePostConfig]=useQueryConfig('jsonplaceholder','createFakePost');// Access multiple queries configconst[multipleFakePostConfig,setMultipleFakePostConfig]=useQueryConfig('jsonplaceholder',['createFakePost','patchFakePost']);// const [createFakePostConfig, patchFakePostConfig] = multipleFakePostConfig;useEffect(()=>{//Set requestConfig to all queriessetJsonplaceholderConfig({requestConfig: {headers: {sharedHeader: '...',},},});/** * Set requestConfig to specific query and merge with baseURL requestConfig. * note: to set requestConfig to specific query, url value must be an object in config. * ex: createFakePost:{url: 'posts'} */setCreateFakePostConfig({requestConfig: {headers: {specificHeader1: '...',},},});//Form 1: Set requestConfig for multiple queriessetMultipleFakePostConfig({requestConfig: {headers: {specificHeader2: '...',},},});/** * Form 2: Set requestConfig as individual . * note: make sure to follow same order of urls keys: ['createFakePost', 'patchFakePost'] */setMultipleFakePostConfig([{requestConfig: {headers: {specificHeader3: '...',},},},{requestConfig: {headers: {specificHeader4: '...',},},},]);},[setCreateFakePostConfig,setJsonplaceholderConfig,setMultipleFakePostConfig,]);returnnull;};constApp=()=>{return(<QueriesProviderconfig={config}><Content/></QueriesProvider>);};A wrapper around useQuery hook.
import{useQueryConfig,useGet,parseConfigURL}from'react-native-queries';constgetConfig={key: '...',//mandatorybaseURL: '...',url: '...',requestConfig: '...',};constgetOptions={onSuccess: (data)=>{},onError: (error)=>{},//...};constgetReturns=useGet(getConfig,getOptions);/** * Example: */constuseFakePost=(id,options)=>{const[fakePostConfig]=useQueryConfig('jsonplaceholder','fakePost');returnuseGet({key: ['FAKE_POST',id],
...parseConfigURL(fakePostConfig,{ id }),},options);};const{ data, error, ...rest}=useFakePost(1,{onSuccess: (data)=>{console.log('fakePostData: ',data);},});Typescript
import{useQueryConfig,useGet,parseConfigURL}from'react-native-queries';importtype{UseGetConfig,UseGetOptions}from'react-native-queries';interfaceGetData{}interfaceGetError{}constgetConfig: UseGetConfig={key: '...',//mandatorybaseURL: '...',url: '...',requestConfig: '...',};constgetOptions: UseGetOptions<GetData,GetError>={onSuccess: (data)=>{},onError: (error)=>{},//...};constgetReturns=useGet<GetData,GetError>(getConfig,getOptions);/** * Example: */interfaceFakePostData{body: string;id: number;title: string;userId: number;}interfaceFakePostError{}constuseFakePost=(id: number,options?: UseGetOptions<FakePostData,FakePostError>)=>{const[fakePostConfig]=useQueryConfig('jsonplaceholder','fakePost');returnuseGet<FakePostData,FakePostError>({key: ['FAKE_POST',id],
...parseConfigURL(fakePostConfig,{ id }),},options);};const{ data, error, ...rest}=useFakePost(1,{onSuccess: (data)=>{console.log('fakePostData: ',data);},});- getOptions:useQuery options,
expect queryKey(mapped to key in getConfig) and queryFn.
- getReturns:useQuery returns.
A wrapper around useInfiniteQuery hook.
import{useQueryConfig,useInfiniteGet}from'react-native-queries';constinfiniteGetConfig={key: '...',// mandatory/** * pageSize and pageParam are mandatory, they will be mapped to their places in url * ex: 'posts?_page={{pageParam}}&_limit={{pageSize}}' */pageSize: '...',pageParam: '...',baseURL: '...',url: '...',requestConfig: '...',};constinfiniteGetOptions={onSuccess: (data)=>{},onError: (error)=>{},getNextPageParam: (lastPage,allPages)=>{},getPreviousPageParam: (firstPage,allPages)=>{},//...};constinfiniteGetReturns=useInfiniteGet(infiniteGetConfig,infiniteGetOptions);fakePostsPages.fetchNextPage();// OR manually specify pageParamfakePostsPages.fetchNextPage({pageParam: 2});// Note: passing getNextPageParam will override default implementation, which is based on increasing pageParam by 1 on every fetchNextPage call till finish all pages, in that case you need to provide your own implementation/** * Example: */constuseFakePostsPages=(options)=>{const[fakePostsPagesConfig]=useQueryConfig('jsonplaceholder','fakePostsPages');returnuseInfiniteGet({key: ['FAKE_POSTS_PAGES'],pageParam: 1,pageSize: 10,
...fakePostsPagesConfig,},options);};const{ data, error, fetchNextPage, ...rest}=useFakePostsPages({onSuccess: (data)=>{console.log('fakePostsPagesData: ',data);},});fetchNextPage();Typescript
import{useQueryConfig,useInfiniteGet}from'react-native-queries';importtype{UseInfiniteGetConfig,UseInfiniteGetOptions,}from'react-native-queries';interfaceInfiniteGetData{}interfaceInfiniteGetError{}constinfiniteGetConfig: UseInfiniteGetConfig={key: '...',// mandatory/** * pageSize and pageParam are mandatory, they will be mapped to their places in url * ex: 'posts?_page={{pageParam}}&_limit={{pageSize}}' */pageSize: '...',pageParam: '...',baseURL: '...',url: '...',requestConfig: '...',};constinfiniteGetOptions: UseInfiniteGetOptions<InfiniteGetData,InfiniteGetError>={onSuccess: (data)=>{},onError: (error)=>{},getNextPageParam: (lastPage,allPages)=>{},getPreviousPageParam: (firstPage,allPages)=>{},//...};constinfiniteGetReturns=useInfiniteGet<InfiniteGetData,InfiniteGetError>(infiniteGetConfig,infiniteGetOptions);fakePostsPages.fetchNextPage();// OR manually specify pageParamfakePostsPages.fetchNextPage({pageParam: 2});// Note: passing getNextPageParam will override default implementation, which is based on increasing pageParam by 1 on every fetchNextPage call till finish all pages, in that case you need to provide your own implementation/** * Example: */constuseFakePostsPages=(options)=>{const[fakePostsPagesConfig]=useQueryConfig('jsonplaceholder','fakePostsPages');returnuseInfiniteGet({key: ['FAKE_POSTS_PAGES'],pageParam: 1,pageSize: 10,
...fakePostsPagesConfig,},options);};const{ data, error, fetchNextPage, ...rest}=useFakePostsPages({onSuccess: (data)=>{console.log('fakePostsPagesData: ',data);},});fetchNextPage();- infiniteGetOptions:useInfiniteQuery options,
expect queryKey(mapped to key in infiniteGetConfig) and queryFn.
- infiniteGetReturns:useInfiniteQuery returns.
A wrapper around useMutation hook.
import{useQueryConfig,usePost}from'react-native-queries';constpostConfig={baseURL: '...',url: '...',requestConfig: '...',};constpostOptions={onSuccess: (data)=>{},onError: (error)=>{},//...};constpostReturns=usePost(postConfig,postOptions);/** * Example: */constuseCreateFakePost=(options)=>{const[createPostConfig]=useQueryConfig('jsonplaceholder','createFakePost');returnusePost(createPostConfig,options);};const{ data, error, mutate, ...rest}=useCreateFakePost({onSuccess: (data)=>{console.log('createFakePostData: ',data);},});mutate({title: 'foo',body: 'bar',userId: 1});Typescript
import{useQueryConfig,usePost}from'react-native-queries';importtype{UsePostConfig,UsePostOptions}from'react-native-queries';interfacePostData{}interfacePostError{}interfacePostVariables{}constpostConfig: UsePostConfig={baseURL: '...',url: '...',requestConfig: '...',};constpostOptions: UsePostOptions<PostData,PostError,PostVariables>={onSuccess: (data)=>{},onError: (error)=>{},//...};constpostReturns=usePost<PostData,PostError,PostVariables>(postConfig,postOptions);/** * Example: */interfaceCreateFakePostData{body: string;id: number;title: string;userId: number;}interfaceCreateFakePostError{}interfaceCreateFakePostVariables{title: string;body: string;userId: number;}constuseCreateFakePost=(options?: UsePostOptions<CreateFakePostData,CreateFakePostError,CreateFakePostVariables>)=>{const[createFakePostConfig]=useQueryConfig('jsonplaceholder','createFakePost');returnusePost<CreateFakePostData,CreateFakePostError,CreateFakePostVariables>(createFakePostConfig,options);};const{ data, error, mutate, ...rest}=useCreateFakePost({onSuccess: (data)=>{console.log('createFakePostData: ',data);},});mutate({title: 'foo',body: 'bar',userId: 1});- postOptions:useMutation options, expect mutationFn.
- postReturns:useMutation returns.
A wrapper around useMutation hook.
import{useQueryConfig,usePut,parseConfigURL}from'react-native-queries';constputConfig={baseURL: '...',url: '...',requestConfig: '...',};constputOptions={onSuccess: (data)=>{},onError: (error)=>{},//...};constputReturns=usePut(putConfig,putOptions);/** * Example: */constuseUpdateFakePost=(id,options)=>{const[updateFakePostConfig]=useQueryConfig('jsonplaceholder','updateFakePost');returnusePut(parseConfigURL(updateFakePostConfig,{ id }),options);};const{ data, error, mutate, ...rest}=useUpdateFakePost(1,{onSuccess: (data)=>{console.log('updateFakePostData: ',data);},});mutate({id: 1,title: 'foo',body: 'bar',userId: 1});Typescript
import{useQueryConfig,usePut}from'react-native-queries';importtype{UsePutConfig,UsePutOptions}from'react-native-queries';interfacePutData{}interfacePutError{}interfacePutVariables{}constputConfig: UsePutConfig={baseURL: '...',url: '...',requestConfig: '...',};constputOptions: UsePutOptions<PutData,PutError,PutVariables>={onSuccess: (data)=>{},onError: (error)=>{},//...};constputReturns=usePut<PutData,PutError,PutVariables>(putConfig,putOptions);/** * Example: */interfaceUpdateFakePostData{body: string;id: number;title: string;userId: number;}interfaceUpdateFakePostError{}interfaceUpdateFakePostVariables{title: string;body: string;userId: number;id: number;}constuseUpdateFakePost=(id: number,options?: UsePutOptions<UpdateFakePostData,UpdateFakePostError,UpdateFakePostVariables>)=>{const[updateFakePostConfig]=useQueryConfig('jsonplaceholder','updateFakePost');returnusePut<UpdateFakePostData,UpdateFakePostError,UpdateFakePostVariables>(parseConfigURL(updateFakePostConfig,{ id }),options);};- putOptions:useMutation options, expect mutationFn.
- putReturns:useMutation returns.
A wrapper around useMutation hook.
import{useQueryConfig,usePatch,parseConfigURL}from'react-native-queries';constpatchConfig={baseURL: '...',url: '...',requestConfig: '...',};constpatchOptions={onSuccess: (data)=>{},onError: (error)=>{},//...};constpatchReturns=usePatch(patchConfig,patchOptions);/** * Example: */constusePatchFakePost=(id,options)=>{const[updateFakePostConfig]=useQueryConfig('jsonplaceholder','patchFakePost');returnusePatch(parseConfigURL(updateFakePostConfig,{ id }),options);};const{ data, error, mutate, ...rest}=usePatchFakePost(1,{onSuccess: (data)=>{console.log('patchFakePostData: ',data);},});mutate({title: 'foo'});Typescript
import{useQueryConfig,usePatch}from'react-native-queries';importtype{UsePatchConfig,UsePatchOptions}from'react-native-queries';interfacePatchData{}interfacePatchError{}interfacePatchVariables{}constpatchConfig: UsePatchConfig={baseURL: '...',url: '...',requestConfig: '...',};constpatchOptions: UsePatchOptions<PatchData,PatchError,PatchVariables>={onSuccess: (data)=>{},onError: (error)=>{},//...};constpatchReturns=usePatch<PatchData,PatchError,PatchVariables>(patchConfig,patchOptions);/** * Example: */interfacePatchFakePostData{body: string;id: number;title: string;userId: number;}interfacePatchFakePostError{}interfacePatchFakePostVariables{title: string;}constusePatchFakePost=(id: number,options?: UsePatchOptions<PatchFakePostData,PatchFakePostError,PatchFakePostVariables>)=>{const[patchFakePostConfig]=useQueryConfig('jsonplaceholder','updateFakePost');returnusePatch<PatchFakePostData,PatchFakePostError,PatchFakePostVariables>(parseConfigURL(patchFakePostConfig,{ id }),options);};const{ data, error, mutate, ...rest}=usePatchFakePost(1,{onSuccess: (data)=>{console.log('patchFakePostData: ',data);},});mutate({title: 'foo'});- patchOptions:useMutation options, expect mutationFn.
- patchReturns:useMutation returns.
A wrapper around useMutation hook.
import{useQueryConfig,useDelete}from'react-native-queries';constdeleteConfig={baseURL: '...',url: '...',requestConfig: '...',};constdeleteOptions={onSuccess: (data)=>{},onError: (error)=>{},//...};constdeleteReturns=useDelete(deleteConfig,deleteOptions);/** * Example: *///Forme 1: pass id as mutate argconstuseDeleteFakePost=(options)=>{const[deleteFakePostConfig]=useQueryConfig('jsonplaceholder','deleteFakePost');returnuseDelete(deleteFakePostConfig,options);};const{ data, error, mutate, ...rest}=useDeleteFakePost({onSuccess: (data)=>{console.log('deleteFakePostData: ',data);},});// mutate variables are pathParams here.// ex: 'posts/{{id}}' will sent as 'posts/1'.mutate({id: 1});//Forme 2: pass id as hook argconstuseDeleteFakePost=(id,options)=>{const[deleteFakePostConfig]=useQueryConfig('jsonplaceholder','deleteFakePost');returnuseDelete(parseConfigURL(deleteFakePostConfig,{ id }),options);};const{ data, error, mutate, ...rest}=useDeleteFakePost(1,{onSuccess: (data)=>{console.log('deleteFakePostData: ',data);},});mutate();Typescript
import{useQueryConfig,useDelete}from'react-native-queries';importtype{UseDeleteConfig,UseDeleteOptions}from'react-native-queries';interfaceDeleteData{}interfaceDeleteError{}interfaceDeleteVariables{}constdeleteConfig: UseDeleteConfig={baseURL: '...',url: '...',requestConfig: '...',};constdeleteOptions: UseDeleteOptions<DeleteData,DeleteError,DeleteVariables>={onSuccess: (data)=>{},onError: (error)=>{},//...};constdeleteReturns=useDelete<DeleteData,DeleteError,DeleteVariables>(deleteConfig,deleteOptions);/** * Example: *///Forme 1: pass id as mutate arginterfaceDeleteFakePostData{}interfaceDeleteFakePostError{}interfaceDeleteFakePostVariables{id: number;}constuseDeleteFakePost=(options?: UseDeleteOptions<DeleteFakePostData,DeleteFakePostError,DeleteFakePostVariables>)=>{const[deleteFakePostConfig]=useQueryConfig('jsonplaceholder','deleteFakePost');returnuseDelete<DeleteFakePostData,DeleteFakePostError,DeleteFakePostVariables>(deleteFakePostConfig,options);};const{ data, error, mutate, ...rest}=useDeleteFakePost({onSuccess: (data)=>{console.log('deleteFakePostData: ',data);},});// mutate variables are pathParams here.// ex: posts/{{id}} will sent as posts/1.mutate({id: 1});//Forme 2: pass id as hook arginterfaceDeleteFakePostData{}interfaceDeleteFakePostError{}interfaceDeleteFakePostVariables{}constuseDeleteFakePost=(id: number,options?: UseDeleteOptions<DeleteFakePostData,DeleteFakePostError,DeleteFakePostVariables>)=>{const[deleteFakePostConfig]=useQueryConfig('jsonplaceholder','deleteFakePost');returnuseDelete<DeleteFakePostData,DeleteFakePostError,DeleteFakePostVariables>(parseConfigURL(deleteFakePostConfig,{ id }),options);};const{ data, error, mutate, ...rest}=useDeleteFakePost(1,{onSuccess: (data)=>{console.log('deleteFakePostData: ',data);},});mutate();- deleteOptions:useMutation options, expect mutationFn.
- deleteReturns:useMutation returns.
Util to replace placeholder between {{...}} in url.
constparsedConfigURL=parseConfigURL({baseURL: 'https://jsonplaceholder.typicode.com',url: 'posts/{{id}}'},{id: 1});//Output: { baseURL: 'https://jsonplaceholder.typicode.com', url: 'posts/1', }/** * Example: */const[deleteFakePostConfig]=useQueryConfig('jsonplaceholder','deleteFakePost');constparsedDeleteFakePostConfig=parseConfigURL(deleteFakePostConfig,{id: 1,});