dotansimha / dotansimha/graphql-code-generator-community

[urql] Add option to append `query` to hooks

Open
#162 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

**Is your feature request related to a problem? Please describe.**

The `react-query` plugin has super helpful `prefetchQuery`, `fetcher` and `getKey` options. I'd like the same for `urql`, to expose the `.query()` method.

**Describe the solution you'd like**

I wish that I could append a typed `query()` to the `urql` hooks with `exposeQuery`, similar to `exposeFetcher` and `exposeQueryKeys` from the `react-query` plugin.

```yml
config:
exposeExecuteQuery: true
```

Then, it would be as simple as:

```ts
await useOnboardingFormQuery.query(variables).toPromise()
```

**Describe alternatives you've considered**

I often find myself writing this:

```ts
import { useClient } from 'url'
import {
OnboardingFormQueryVariables,
OnboardingFormDocument
} from './generated'

function useOnboardingPrefetch() {
const urql = useClient()

return (variables: OnboardingFormQueryVariables) =>
await urql
.query(OnboardingFormDocument, variables, {
requestPolicy: 'cache-first'
})
.toPromise()
}

// in my component
const prefetch = useOnboardingPrefetch()

const onPress = async () => {
const result = await prefetch()
doSomethingWithResult(result)
openOnboardingModal()
}
```

**Additional context**

I'm not familiar with this library's internals, but if there is willingness to merge a PR, I will gladly take a look.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.