ブラウザアプリケーションでの GraphQL オペレーションのモニター

ブラウザアプリケーションでは、GraphQL を使用して効率的にデータを取得できます。コントローラにより、ブラウザアプリケーションでの GraphQL オペレーションのモニタリングが有効になります。コントローラ UI では、GraphQL オペレーション名に追加されたパスがリクエストに表示されます（例：/api/graphql/getAllPosts） 。

デフォルトでは、ブラウザ リアルユーザーモニタリング（BRUM）は次のヘッダーをサポートしています。
  • x-apollo-operation-name
  • x-adeum-graphql-operation
  • graphql-operation

以下に、さまざまなアプリケーションヘッダーの例を示します。

Fetch API の使用

Fetch API における GraphQL オペレーションを指定します。この名前がコントローラ UI に表示されます。

JSON 
fetch(ENDPOINT, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "x-adeum-graphql-operation": "<operation-name>", // this header is used to identify the GraphQL operation in the AppDynamics dashboard
    },
    body: JSON.stringify({
        query: GRAPHQL_QUERY_STRING,
    }),
})

Apollo Client API の使用

Apollo Client API における GraphQL オペレーションを指定します。この名前がコントローラ UI に表示されます。

JAVASCRIPT 
import { ApolloClient, HttpLink, InMemoryCache, ApolloLink } from "@apollo/client";

// Apollo link (middleware) to set GraphQL operation name in headers
const operationNameLink = new ApolloLink((operation, forward) => {
    operation.setContext({
        headers: {
            "x-adeum-graphql-operation": operation.operationName, // this header is used to identify the GraphQL operation in the AppDynamics dashboard
        }
    });
    return forward(operation);
});

// Apollo client with the operationNameLink link
const client = new ApolloClient({
    link: ApolloLink.from([operationNameLink, new HttpLink({ uri: ENDPOINT })]),
    cache: new InMemoryCache(),
});

// Execute the query as usual
client.query({query: GRAPHQL_QUERY_STRING})

Urql API の使用

Urql API における GraphQL オペレーションを指定します。この名前がコントローラ UI に表示されます。

JAVASCRIPT 
import { Client, fetchExchange, mapExchange } from '@urql/core';

// Urql exchange to set GraphQL operation name in headers
const operationNameExchange = mapExchange({
    onOperation: (operation) => {
        const operationName = operation.query.definitions.find(definition => definition.kind === 'OperationDefinition').name.value;
        operation.context.fetchOptions ||= {};
        if (typeof operation.context.fetchOptions === 'function') {
            operation.context.fetchOptions = operation.context.fetchOptions();
        }
        operation.context.fetchOptions.headers = {
            "x-adeum-graphql-operation": operationName, // this header is used to identify the GraphQL operation in the AppDynamics dashboard
            ...operation.context.fetchOptions.headers,
        }
    }
}); 

// Urql client with operationNameExchange
const client = new Client({
    url: ENDPOINT,
    exchanges: [operationNameExchange, fetchExchange],
    preferGetMethod: false,
});

// Execute the query as usual
const { data } = await client.query({query: GRAPHQL_QUERY_STRING});

カスタムヘッダーの使用

カスタムヘッダーを使用する場合は、次のように javascript エージェントスクリプトを更新して挿入します。

JSON 
<script charset="UTF-8" type="text/javascript">
window["adrum-start-time"] = new Date().getTime();
(function(config){
    config.appKey = "SM-AFN-CDN";
    config.adrumExtUrlHttp = "http://cdn.appdynamics.com";
    config.adrumExtUrlHttps = "https://cdn.appdynamics.com";
    config.beaconUrlHttp = "http://eum-shadow-master-col.saas.appd-test.com";
    config.beaconUrlHttps = "https://eum-shadow-master-col.saas.appd-test.com";
    config.sessionReplay = {"enabled":true,"sessionReplayUrlHttps":"https://api.eum-appdynamics.com"};
    config.useHTTPSAlways = true;
    config.resTiming = {"bufSize":200,"clearResTimingOnBeaconSend":true};
    config.maxUrlLength = 512;
    config.graphqlOperationHeader = "x-custom-graphql-operation";
})(window["adrum-config"] || (window["adrum-config"] = {}));
</script>
<script src="//cdn.appdynamics.com/adrum/adrum-25.9.0.4694.js"></script>