Bad typing of the execute function

[tomashauser]

The docs mention the execute function which serves as a lightweight fetch wrapper taking in typed GraphQL queries and returning the result.

import type { TypedDocumentString } from './graphql'
 
export async function execute<TResult, TVariables>(
  query: TypedDocumentString<TResult, TVariables>,
  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
) {
  const response = await fetch('https://graphql.org/graphql/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/graphql-response+json'
    },
    body: JSON.stringify({
      query,
      variables
    })
  })
 
  if (!response.ok) {
    throw new Error('Network response was not ok')
  }
 
  return response.json() as TResult
}

1. I'm finding it strange that we would return the response.json() as a TResult . GraphQL returns the data in a wrapper that always contains the data field and usually also errors. The TResult is the contents of the data field, not the whole json response.
2. The response.json() returns a promise so if anything we should type it as Promise<TResult>. I'm not sure that this is needed though, so correct me if I'm wrong here.

I suggest we edit the return type to GraphQLResponse<Promise<TResult>>. This makes it possible to access the data and error fields and also properly maintains that the result is a Promise.

import type { TypedDocumentString } from './graphql'
 
export async function execute<TResult, TVariables>(
  query: TypedDocumentString<TResult, TVariables>,
  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
): GraphQLResponse<Promise<TResult>> {
  const response = await fetch('https://graphql.org/graphql/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/graphql-response+json'
    },
    body: JSON.stringify({
      query,
      variables
    })
  })
 
  if (!response.ok) {
    throw new Error('Network response was not ok')
  }
 
  return response.json() as GraphQLResponse<Promise<TResult>>;
}

We can then make the example below the execute function use the data like this:

import { graphql } from './graphql'
import { execute } from './graphql/execute'
 
const PeopleCountQuery = graphql(`
  query PeopleCount {
    allPeople {
      totalCount
    }
  }
`)
 
execute(PeopleCountQuery).then(({ data }) => {
  console.log(data)
})