React-Query for Data Fetching

git merge with/react-query

import { someFetcher } from '../resolvers/some.fetcher'
import { createQueryBridge, HydratedRouteProps } from '../navigation/UniversalRouteScreen.helpers'
 
/* --- Data Fetching ----------- */
 
// -i- Think of a "bridge" as a universal version of `getServerSideProps()` from next.js
// -i- ...which will work on Expo / Mobile / iOS / Android as well as on server / browser
const queryBridge = createQueryBridge({
 
    // Transform the route params into things useable by react-query
    routeParamsToQueryKey: (routeParams) => ['subpage', routeParams.slug],
    routeParamsToQueryInput: (routeParams) => ({ slug: routeParams.slug }),
 
    // Provide the fetcher function to be used by react-query
    routeDataFetcher: someFetcher,
 
    // Transform fetcher output to props after react-query was called
    fetcherDataToProps: (fetcherData) => ({ someProp: fetcherData }),
})
 
/* --- <SomeScreen/> ----------- */
 
// Component for screen UI can infer types from "bridge" 👇
const SomeScreen = (props: HydratedRouteProps<typeof queryBridge>) => {
    
    // Props with inferred types 🙌
    const { someProp } = props
    
    // Render screen UI
    // ...
}

import { SomeScreen, queryBridge } from '@app/screens/SomeScreen'
import { UniversalRouteScreen } from '@app/navigation'
 
/* --- /subpages/[slug] ----------- */
 
export default (props) => (
    <UniversalRouteScreen
        {...props}
        // Will execute each step from the bridge in sequence to get to the final props
        queryBridge={queryBridge}
        // Will provide the final props to the screen component on iOS, Android, server & browser
        routeScreen={SomeScreen}
    />
)

import SlugRoute from '@app/routes/subpages/[slug]'
 
export default SlugRoute

import SlugRoute from '@app/routes/subpages/[slug]'
 
export default SlugRoute
 
// -i- Export any other next.js routing config here
// -i- See: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
 
export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5