Hydrogen 2.0: Compatibility with graphql-code-generator

[davidhousedev]

It was super exciting to read the early look into a potential API for querying the Storefront within a Remix loader. I have some feedback to share about the following example:

  const productQuery = storefront.query({
    query: gql`
      query Product($handle: String!, $language: LanguageCode) @inContext(language: $language) {
        product: product(handle: $handle) {
          id
          title
        }
      }
     `,
    variables: {
      handle,
      language,
    },
    // New: Optionally filter your data before it is returned from the loader.
    filter(data, errors) {
      invariant(data.product, 'No product found');
      return data.product;
    },
    cache: CacheShort(),
  });

The abstraction layer sits atop a graphql client for interfacing with the Storefront API. This is not ideal for our toolchain, which relies heavily on graphql-code-generator to create a type-safe graphql SDK.

We could continue to use graphql-code-generator on this new API if we did something like the following:

import { ProductDocument } from './generated-sdk.ts'

  const productQuery = storefront.query({
    query: ProductDocument,
    variables: {
      handle,
      language,
    },
    // New: Optionally filter your data before it is returned from the loader.
    filter(data, errors) {
      invariant(data.product, 'No product found');
      return data.product;
    },
    cache: CacheShort(),
  });

That said, there are multiple downsides to this approach:

• We lose type safety on the variables, which would either be enforced by the output SDK or by using e.g. a ProductQueryVariables type exported by './generated-sdk.ts'
• We're needing to manually stitch together multiple types that are output for the same query.

In contrast, this is how we would access the query via useQuery:

  const resp = useQuery(`useProduct-${handle}`, () =>
    sdk.Product({ handle })
  )

I'm hoping that we can avoid losing any type safety or DX ergonomics when migrating from Hydrogen 1.0 to Hydrogen 2.0. I'm curious to hear more about any plans you have in this area!

[benjaminsehl]

@davidhousedev — I've got a side project I'm building where I leveraged this repo: https://github.com/thomasheyenbrock/remix-graphql that uses graphql-code-generator — so totally get the benefits. Type safety in general is something we're investing a lot more in. Having this built into the H2.0 stack makes a ton of sense.

I think @frehner will have a lot of ideas here (and may have already done some stuff here).

[frehner]

Yeah I plan on implementing it soon in the (internal at the moment) new demo store; I have another example of it working in hydrogen-ui on NextJS here