Support Customer Account API in GraphiQL #1693
Conversation
This comment has been minimized.
This comment has been minimized.
| @@ -91,21 +91,42 @@ export function createCustomerAccountClient({ | |||
| url.protocol === 'http:' ? url.origin.replace('http', 'https') : url.origin; | |||
| const redirectUri = authUrl.startsWith('/') ? origin + authUrl : authUrl; | |||
|
|
|||
| const customerAccountApiUrl = `${customerAccountUrl}/account/customer/api/${customerApiVersion}/graphql`; | |||
There was a problem hiding this comment.
I made a bunch of similar changes in #1684
| // CustomerAccount API does not support introspection to the same URL. | ||
| // Read it from a file using the asset server: |
There was a problem hiding this comment.
@s-lee-kwong Can we add introspection to the graphql end point?
There was a problem hiding this comment.
It is something we can look at but right now our only introspection point is something like
https://app.myshopify.com/services/graphql/introspection/customer?api_client_api_key=159a99b8a7289a72f68603f2f4de40ac&api_version=2024-01
but that api_key is from an app so I wouldn't use what I pasted exactly.
There was a problem hiding this comment.
GraphiQL can only work with 1 url for both introspection and queries. So if you want to add support for GraphiQL in CAAPI, the URL for queries should also provide introspection 🙏
Here we had to work around this issue by downloading the schema in a different way and providing it to GarphiQL in JSON format without doing introspection.
There was a problem hiding this comment.
I will add this to the on going Friction Doc for the future.
Having the introspection and queries be at the same URL is a fairly standard way of implementation for GraphQL API. A lot of the tools work assuming this convention and it would be really good to have.
| @@ -53,6 +53,8 @@ export type CustomerClient = { | |||
| handleAuthStatus: () => void | DataFunctionValue; | |||
| /** Returns CustomerAccessToken if the customer is logged in. It also run a expiry check and does a token refresh if needed. */ | |||
| getAccessToken: () => Promise<string | undefined>; | |||
| /** Creates the fully-qualified URL to your store's GraphQL endpoint.*/ | |||
| getApiUrl: () => string; | |||
There was a problem hiding this comment.
reminder to add this to the Doc type below as well
There was a problem hiding this comment.
🎩 and it looks great! Just missing a type.
Slightly wonder if we should list out both Storefront API and Customer Account API in the UI with selected state or maybe a drop down? The interaction of tabbing on the text to switch API is not super clear to me.
Also future task! would love to bring in a documentation explore for the schema!
Yeah absolutely. This was my original intention but adding the toggle next to the GraphiQL logo was much easier (we don't have JSX in this page 🙃 ).
Do you mean this? We added it long ago! Or are you suggesting another plugin? 
|
Changed it to a toolbar button! I thought we had to add the whole existing toolbar manually but luckily it supports a 
Also, it now stores the tab<>schema information in localStorage instead of using an in-query comment 🎉 |
|
Add support for multiple schemas in GraphiQL and a way to update schema automatically when changing tabs.
Open GraphiQL clicking on links from the Subrequest Profiler.