Adding Bootstrap/Bulma/CSS frameworks to Angular

Install your preferred CSS framework using npm or yarn,

yarn add bootstrap
yarn add bulma

Import the minified style files into the styles.scss file available on project root directory,

@import "~bulma/css/bulma.min.css";
@import "~bootstrap/dist/css/bootstrap.min.css";
styles.scss

Add GraphQL subscription to GraphiQL

Add following scripts in index.html

<script src="//unpkg.com/subscriptions-transport-ws@0.9.16/browser/client.js"></script>
<script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>

Add following in the React component,

let subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(`${window.location.protocol === "http:" ? "ws://" : "wss://"}${
    window.location.host
    }/graphql`, {
    reconnect: true
});

let myCustomFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);