Will there be a new generator for plain async functions?

[capaj]

Next.js 13 was released yesterday with:
https://nextjs.org/blog/next-13#data-fetching

If I want to use that, react-apollo-hooks generator cannot be used because I need plain async functions which return the data. Hooks won't work.

This going to need a new generator. Is there a plan to introduce it?

[dotansimha]

I guess ideally, you can use Codegen's TypedDocumentNode and have it integrated into your NextJS app (and the new async feature) with a small wrapper around the fetch function that hooks into TypedDocumentNode?

(I'm also saying that in the context of preferring TypedDocumentNode in general, instead of framework-specific hooks)

[capaj]

I don't suppose you could share the code for that small wrapper around fetch so that it properly returns the type in the TypedDocumentNode or could you?

[n1ru4l]

@capaj You can find an example for Node.js using the HTTP module here:

graphql-code-generator/examples/typescript-esm/src/executeOperation.ts

Lines 6 to 34 in b4ac08e

	export function executeOperation<TResult, TVariables>(
	url: string,
	operation: TypedDocumentNode<TResult, TVariables>,
	...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
	): Promise<ExecutionResult<TResult>> {
	return new Promise((resolve, reject) => {
	const request = https.request(
	url,
	{ method: 'POST', headers: { 'content-type': 'application/json' } },
	response => {
	let data = '';
	response.on('data', chunk => {
	data += chunk;
	});
	response.on('end', () => {
	resolve(JSON.parse(data));
	});
	response.on('error', reject);
	}
	);
	request.write(
	JSON.stringify({
	query: print(operation),
	variables: variables != null ? variables : undefined,
	})
	);
	request.end();
	});
	}

Here is a fetch implementation.

import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
import type { ExecutionResult } from 'graphql';
import { print } from 'graphql';

export function executeOperation<TResult, TVariables>(
  url: string,
  operation: TypedDocumentNode<TResult, TVariables>,
  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
): Promise<ExecutionResult<TResult>> {
  return fetch(url, {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
      query: print(operation),
      variables,
    }),
  }).then(res => res.json());
}

I recommend using the client preset for generating the TypedDocumentNodes.