How To's
Working with GraphQL
Only for Apollo GraphQL
This only has to be done if you are building on Apollo’s GraphQL library. Otherwise, you can safely ignore this page.
PlayerZero wraps window.fetch
and XMLHttpRequest
calls during the regular
course of it monitoring in order to capture performance & network errors and
build better devtools. Out of the box we also detect and separate different
graphql calls based on the operationName
parameter.
If you use an Apollo GraphQL server to host your GraphQL endpoint, you need to do one additional step to enable PlayerZero completely.
Embed this snippet in addition to your regular setup as
the first tag in your <head/>
of the index.html
file. This helps PlayerZero
get access to the fetch object first before the page loads.
<script>
const originalFetch = window.fetch;
if (!window["playerzero"]) window["playerzero"] = {};
window["playerzero"]["monkey_patch_ts"] = performance.now();
window.fetch = function (url, options) {
// preserve arity
if (
window["playerzero"] &&
window["playerzero"]["before_fetch_apply"] &&
window["playerzero"]["after_fetch_apply"]
) {
const beforeFetchApplyResult = window["playerzero"]["before_fetch_apply"](
url,
options
);
const args = arguments;
return new Promise((resolve) => {
originalFetch.apply(this, args).then((response) => {
return window["playerzero"]
["after_fetch_apply"](response, beforeFetchApplyResult)
.finally(() => resolve(response));
});
});
} else return originalFetch.apply(this, arguments);
};
</script>