diff --git a/.changeset/bright-olives-yell.md b/.changeset/bright-olives-yell.md new file mode 100644 index 0000000000..1c7b6ec39e --- /dev/null +++ b/.changeset/bright-olives-yell.md @@ -0,0 +1,5 @@ +--- +'@commercetools-frontend/application-shell-connectors': patch +--- + +Append the GraphQL operation name as a query parameter to the `/graphql` endpoint. This is useful for debugging purposes, for example when inspecting the network tab. diff --git a/packages/application-shell-connectors/src/configure-apollo.ts b/packages/application-shell-connectors/src/configure-apollo.ts index 522a5068cc..fd6dee8146 100644 --- a/packages/application-shell-connectors/src/configure-apollo.ts +++ b/packages/application-shell-connectors/src/configure-apollo.ts @@ -23,10 +23,29 @@ type TApolloClientOptions = { restLink?: ApolloLink; }; +// Inspired by https://www.apollographql.com/docs/react/api/link/apollo-link-http#dynamic-uri +const customFetch: WindowOrWorkerGlobalScope['fetch'] = (uri, options) => { + const searchParams = new URLSearchParams(); + // We attempt to read the GraphQL `operationName` to append it as a query parameter. + // This is only useful for debugging purposes (network tab) and does not have any functional implication. + if (options?.body) + try { + const parsed = JSON.parse(options.body as string); + searchParams.set('op', parsed.operationName); + } catch { + // noop + } + + return fetch( + searchParams.size > 0 ? `${uri}?${searchParams.toString()}` : uri, + options + ); +}; + const createApolloLink = (options: TApolloClientOptions = {}) => { const httpLink = createHttpLink({ uri: `${getMcApiUrl()}/graphql`, - fetch, + fetch: customFetch, }); // The order of links is IMPORTANT!