Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Codegen doesn't work out of the box with direct access graphql client #1981

Open
seaders opened this issue Jan 17, 2025 · 0 comments
Open

Codegen doesn't work out of the box with direct access graphql client #1981

seaders opened this issue Jan 17, 2025 · 0 comments

Comments

@seaders
Copy link

seaders commented Jan 17, 2025

I've set my graphql config up as standard,

import { ApiType, shopifyApiProject } from "@shopify/api-codegen-preset"

export default {
  // For syntax highlighting / auto-complete when writing operations
  schema: "https://shopify.dev/admin-graphql-direct-proxy/2024-10",
  documents: ["./src/app/**/*.{js,ts,jsx,tsx}"],
  projects: {
    // To produce variable / return types for Admin API operations
    default: shopifyApiProject({
      apiType: ApiType.Admin,
      apiVersion: "2024-10",
      documents: ["./src/app/**/*.{js,ts,jsx,tsx}"],
      outputDir: "./src/__generated__"
    })
  }
}

And, it generates everything perfectly correctly.

My issue is, from the app's frontend, I'm creating just about the simplest graphQL client for direct access,

import { createGraphQLClient } from "@shopify/graphql-client"
import { apiVersion } from "./consts"

export const graphQLClient = createGraphQLClient({
  url: `shopify:admin/api/${apiVersion}/graphql.json`,
  headers: {}
})

This works, 100% of the time for actually querying against, and getting the correct data back, and I also get correct typehinting when writing graphQL,

Image

(I'm deliberately including the incorrect image here to show that that too is working right)

Problem is? No response is types, and everything is any,

Image

Thing is, I know exactly the cause now, due to the generated code in admin.generated.d.ts. At the bottom they declare a module as an "addon" to the client which will be making the calls,

...
declare module '@shopify/admin-api-client' {
  type InputMaybe<T> = AdminTypes.InputMaybe<T>;
  interface AdminQueries extends GeneratedQueryTypes {}
  interface AdminMutations extends GeneratedMutationTypes {}
}

Problem is, again, this is direct access, from the frontend, via the generic shopify graphQL client, NOT a backend-ish @shopify/admin-api-client.

I've tried setting module in the settings to "@shopify/graphql-client" and while it did generate the output for that,

declare module '@shopify/graphql-client' {
  type InputMaybe<T> = AdminTypes.InputMaybe<T>;
  interface AdminQueries extends GeneratedQueryTypes {}
  interface AdminMutations extends GeneratedMutationTypes {}
}

It didn't actually work. What DID work, in a hacky solution of a way, is to typecast the graphQL client into the admin client, i.e.

import { AdminApiClient } from "@shopify/admin-api-client"
import { createGraphQLClient } from "@shopify/graphql-client"

import { apiVersion } from "./consts"

export const graphQLClient = createGraphQLClient({
  url: `shopify:admin/api/${apiVersion}/graphql.json`,
  headers: {}
}) as unknown as AdminApiClient

It's frustrating that this has to be done, and I really do have to say the docs on using the direct-access from the frontend is extremely lacking, and at least there is a solution here, but I think it's something that really should be looked at, I don't think it should be as hard as this, and I don't like having to install the admin api library on the frontend, but c'est la vie, it works set up like this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant