2021-08-18 20:51:15 +02:00
|
|
|
import Events from "../../_events";
|
2021-08-09 18:04:09 +02:00
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
import { cache } from "./cache";
|
2021-08-09 18:04:09 +02:00
|
|
|
import {
|
|
|
|
from,
|
|
|
|
ApolloClient,
|
|
|
|
HttpLink,
|
|
|
|
ApolloLink,
|
|
|
|
concat,
|
2021-08-18 20:51:15 +02:00
|
|
|
} from "@apollo/client";
|
2021-08-09 18:04:09 +02:00
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
import { onError } from "@apollo/client/link/error";
|
|
|
|
const NAME = "appolo";
|
2021-08-09 18:04:09 +02:00
|
|
|
|
|
|
|
const API_META = document.querySelector('meta[name="api_url"]');
|
2021-08-18 20:51:15 +02:00
|
|
|
const API_URL = API_META
|
|
|
|
? API_META.getAttribute("content")
|
|
|
|
: `${window.location.protocol}//${window.location.host}/graphql`;
|
2021-08-09 18:04:09 +02:00
|
|
|
|
|
|
|
const authMiddleware = new ApolloLink((operation, forward) => {
|
|
|
|
// add the authorization to the headers
|
|
|
|
operation.setContext({
|
|
|
|
headers: {
|
|
|
|
apikey: `${GRAPHQL_API_KEY}`,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
return forward(operation);
|
|
|
|
});
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
console.info(`%cAPI: ${API_URL}`, "color:green;font-size:10px");
|
2021-08-09 18:04:09 +02:00
|
|
|
|
|
|
|
const link = from([
|
|
|
|
authMiddleware,
|
|
|
|
new ApolloLink((operation, forward) => {
|
|
|
|
operation.setContext({
|
|
|
|
start: new Date(),
|
|
|
|
});
|
|
|
|
return forward(operation);
|
|
|
|
}),
|
2021-08-18 20:51:15 +02:00
|
|
|
onError(({ operation, response, graphQLErrors, networkError, forward }) => {
|
|
|
|
if (operation.operationName === "IgnoreErrorsQuery") {
|
2021-08-09 18:04:09 +02:00
|
|
|
console.error(`${NAME}: IgnoreErrorsQuery`);
|
|
|
|
response.errors = null;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (graphQLErrors) {
|
2021-08-18 20:51:15 +02:00
|
|
|
graphQLErrors.forEach(({ message, locations, path }) =>
|
2021-08-09 18:04:09 +02:00
|
|
|
console.error(
|
2021-08-18 20:51:15 +02:00
|
|
|
`${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
|
|
|
|
)
|
2021-08-09 18:04:09 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (networkError) {
|
|
|
|
/*let msg = '';
|
|
|
|
switch (networkError.statusCode) {
|
|
|
|
case 404:
|
|
|
|
msg = 'Not Found.';
|
|
|
|
break;
|
|
|
|
case 500:
|
|
|
|
msg = 'Server issue, please try again latter.';
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
msg = 'Something went wrong.';
|
|
|
|
break;
|
|
|
|
}*/
|
|
|
|
console.error(`${NAME}: [Network error] ${networkError.statusCode}`);
|
|
|
|
}
|
|
|
|
|
|
|
|
console.error(`${NAME}: [APOLLO_ERROR]`);
|
|
|
|
window.dispatchEvent(new Event(Events.APOLLO_ERROR));
|
|
|
|
}),
|
|
|
|
new ApolloLink((operation, forward) => {
|
|
|
|
return forward(operation).map((data) => {
|
|
|
|
// data from a previous link
|
|
|
|
const time = new Date() - operation.getContext().start;
|
|
|
|
console.log(
|
2021-08-18 20:51:15 +02:00
|
|
|
`${NAME}: operation ${operation.operationName} took ${time} ms to complete`
|
2021-08-09 18:04:09 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
window.dispatchEvent(new Event(Events.ONLINE));
|
|
|
|
return data;
|
|
|
|
});
|
|
|
|
}),
|
|
|
|
new HttpLink({
|
|
|
|
uri: API_URL,
|
|
|
|
|
|
|
|
// Use explicit `window.fetch` so tha outgoing requests
|
|
|
|
// are captured and deferred until the Service Worker is ready.
|
|
|
|
fetch: (...args) => fetch(...args),
|
2021-08-18 20:51:15 +02:00
|
|
|
credentials: "same-origin", //'include',
|
|
|
|
connectToDevTools: process.env.NODE_ENV === "development" ? true : false,
|
2021-08-09 18:04:09 +02:00
|
|
|
}),
|
|
|
|
]);
|
|
|
|
|
|
|
|
// Isolate Apollo client so it could be reused
|
|
|
|
// in both application runtime and tests.
|
|
|
|
|
|
|
|
const client = new ApolloClient({
|
|
|
|
cache,
|
|
|
|
link,
|
|
|
|
});
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
export { client };
|