bridgedFetcher()

import { bridgedFetcher } from '@green-stack/schemas/bridgedFetcher'

A util to turn a Data Bridge into a universal fetcher function that can be used in your front-end code with, for example, react-query.

import { updatePostBridge } from './updatePost.bridge'
// ☝️ Reuse your data bridge
import { bridgedFetcher } from '@green-stack/schemas/bridgedFetcher'
// ☝️ Universal graphql fetcher that can be used in any JS environment
 
/* --- updatePostFetcher() --------- */
 
export const updatePostFetcher = bridgedFetcher(updatePostBridge)

Fetching with react-query

import { useQuery } from '@tanstack/react-query'

For simply fetching data with react-query, you can use the useQuery hook with the bridgedFetcher:

useQuery({
    queryKey: ['updatePost', postId],
    queryFn: someBridgedFetcher,
    // provide the fetcher (👆) as the queryFn 
    ...options,
})

Be sure to check the useQuery() docs for all the available options you might want to prefill or abstract.

You can also do mutations with useMutation() for updating data in any way.

Related Automations

add-resolver - generator

You don’t need to manually create a new fetcher with bridgedFetcher() every time you create a new resolver. You can use the add-resolver generator to create a new resolver and its fetching function in one go:

npx turbo gen resolver