Skip to content

Instantly share code, notes, and snippets.

@sglanzer
Last active November 1, 2022 02:42
Show Gist options
  • Save sglanzer/6e3e086576f70fd9291acbec0176a582 to your computer and use it in GitHub Desktop.
Save sglanzer/6e3e086576f70fd9291acbec0176a582 to your computer and use it in GitHub Desktop.
Wiring WunderGraph to non-react project (generic TS)
import { createClient, Operations } from '<package>/.wundergraph/generated/client'
import { createHooks } from './hooks'
const client = createClient()
const hooks = createHooks<Operations>(client)
export async function foo(): Promise<void> {
const response = await hooks.query({
operationName: '<operation>',
})
}
import { Client, OperationRequestOptions, OperationsDefinition } from '@wundergraph/sdk/client'
export type UseQueryOptions<OperationName, Input, LiveQuery> = {
operationName: OperationName;
liveQuery?: LiveQuery;
enabled?: boolean;
input?: Input;
}
export const createHooks = <Operations extends OperationsDefinition>(client: Client) => {
const queryFetcher = async <
OperationName extends Extract<keyof Operations['queries'], string>,
Data extends Operations['queries'][OperationName]['data'] = Operations['queries'][OperationName]['data'],
RequestOptions extends OperationRequestOptions<
Extract<keyof Operations['queries'], string>,
Operations['queries'][OperationName]['input']
> = OperationRequestOptions<
Extract<keyof Operations['queries'], string>,
Operations['queries'][OperationName]['input']
>
>(
query: RequestOptions,
) => {
const result = await client.query<RequestOptions, Data>(query)
if (result.error) {
throw result.error
}
return result.data
}
const query = <
OperationName extends Extract<keyof Operations['queries'], string>,
Input extends Operations['queries'][OperationName]['input'] = Operations['queries'][OperationName]['input'],
Data extends Operations['queries'][OperationName]['data'] = Operations['queries'][OperationName]['data'],
LiveQuery extends Operations['queries'][OperationName]['liveQuery'] = Operations['queries'][OperationName]['liveQuery']
>(options: UseQueryOptions<OperationName, Input, LiveQuery>) => {
return queryFetcher<OperationName, Data | undefined>(options)
}
return {
query
}
}
@sglanzer
Copy link
Author

sglanzer commented Nov 1, 2022

Ah yes, my bad - missed it at the bottom of the file I was copying from!

Fixed :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment