Description
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,
(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,
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.