Creating common GraphQL layer for AdminGraphqlClient vs AdminApiClient - interface differences

GraphQL Admin API Troubleshooting
,
1

Our application consists of a backend service developed with the React template and an events-consumer for our Kafka events. Both of them interacts with Shopify GraphQL Admin API.

The backend application uses AdminGraphqlApi client, which is initialized like in the example, using authenticate in the request handler, and then using admin.graphql to do the requests to the API.

The events-consumer uses AdminApiClientcreated with createAdminApiClient from @shopify/admin-api-client.

The app and the events-consumer use a lot of similar GraphQL queries and we want to extract the common code. AFAIU, the AdminGraphqlApi and AdminApiClient have different interfaces, so we might need to create an extra adapter layer around them.

Have you ever done something like this? Is there documentation on the clients’ interfaces? Or maybe I can have a look at their source code?

I am fairly new to Javascript and Typescipt, so it’s a little difficult to find my way around different builds and packages, so any help would be greatly appreciated.

2

Hey @r.egorov :waving_hand:

Both clients ultimately POST to the same Admin GraphQL endpoint (https://{shop}.myshopify.com/admin/api/{version}/graphql.json), so that’s likely why you’re seeing a lot of commonality between the two different clients.

The lightweight Admin API client source is here: shopify-app-js/packages/api-clients/admin-api-client/src at main · Shopify/shopify-app-js · GitHub, and the remix low-level GraphQL client used under the hood is here: shopify-app-js/packages/api-clients/graphql-client at main · Shopify/shopify-app-js · GitHub.

For how Remix’s authenticate.admin and admin.graphql are used in practice, the best reference I’d recommend would be the doc below:

The doc above is mainly cetnered on migrating from the REST API to GraphQL, but it has quite a bit of decent info on how our API libraries and boilerplates work, so I wanted to share just in case it helps with building your adapter. Hope this helps - let me know if I can clarify anything for you!