diff --git a/package.json b/package.json
index 7ea36437..924a7990 100755
--- a/package.json
+++ b/package.json
@@ -37,6 +37,8 @@
   },
   "dependencies": {
     "displacejs": "^1.2.4",
+    "graphql": "^0.12.3",
+    "graphql-tag": "^2.6.1",
     "path-to-regexp": "^2.1.0",
     "popper.js": "^1.13.0",
     "sortablejs": "^1.7.0",
diff --git a/src/modules/chat/badges.js b/src/modules/chat/badges.js
index 2b10a121..3ca3179c 100644
--- a/src/modules/chat/badges.js
+++ b/src/modules/chat/badges.js
@@ -300,6 +300,8 @@ export default class Badges extends Module {
 						style
 					};
 
+				// TODO: Render styles for badges with overrides.
+
 				slotted[slot] = { id: badge.id, props };
 			}
 
diff --git a/src/sites/twitch-twilight/modules/channel_bar.js b/src/sites/twitch-twilight/modules/channel_bar.js
index dc60929e..c0bc3d24 100644
--- a/src/sites/twitch-twilight/modules/channel_bar.js
+++ b/src/sites/twitch-twilight/modules/channel_bar.js
@@ -18,7 +18,7 @@ export default class ChannelBar extends Module {
 		this.inject('metadata');
 
 
-		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', `query {
+		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', this.apollo.gql`query {
 			user {
 				stream {
 					createdAt
diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.js b/src/sites/twitch-twilight/modules/directory/browse_popular.js
index 3204029b..c560de94 100644
--- a/src/sites/twitch-twilight/modules/directory/browse_popular.js
+++ b/src/sites/twitch-twilight/modules/directory/browse_popular.js
@@ -15,7 +15,7 @@ export default class BrowsePopular extends SiteModule {
 		this.inject('site.fine');
 		this.inject('settings');
 
-		this.apollo.registerModifier('BrowsePage_Popular', `query {
+		this.apollo.registerModifier('BrowsePage_Popular', this.apollo.gql`query {
 			streams {
 				edges {
 					node {
diff --git a/src/sites/twitch-twilight/modules/directory/community.js b/src/sites/twitch-twilight/modules/directory/community.js
index 145fc5a3..c4c80ca0 100644
--- a/src/sites/twitch-twilight/modules/directory/community.js
+++ b/src/sites/twitch-twilight/modules/directory/community.js
@@ -12,7 +12,7 @@ export default class Community extends SiteModule {
 
 		this.inject('site.apollo');
 
-		this.apollo.registerModifier('GamePage_Game', `query {
+		this.apollo.registerModifier('GamePage_Game', this.apollo.gql`query {
 			directory {
 				... on Community {
 					streams {
diff --git a/src/sites/twitch-twilight/modules/directory/following.js b/src/sites/twitch-twilight/modules/directory/following.js
index 3c48afe3..5471d1bc 100644
--- a/src/sites/twitch-twilight/modules/directory/following.js
+++ b/src/sites/twitch-twilight/modules/directory/following.js
@@ -58,7 +58,7 @@ export default class Following extends SiteModule {
 			changed: () => this.ChannelCard.forceUpdate()
 		});
 
-		this.apollo.registerModifier('FollowedIndex_CurrentUser', `query {
+		this.apollo.registerModifier('FollowedIndex_CurrentUser', this.apollo.gql`query {
 			currentUser {
 				followedLiveUsers {
 					nodes {
@@ -83,7 +83,7 @@ export default class Following extends SiteModule {
 			}
 		}`);
 
-		this.apollo.registerModifier('FollowingLive_CurrentUser', `query {
+		this.apollo.registerModifier('FollowingLive_CurrentUser', this.apollo.gql`query {
 			currentUser {
 				followedLiveUsers {
 					edges {
@@ -98,7 +98,7 @@ export default class Following extends SiteModule {
 			}
 		}`);
 
-		this.apollo.registerModifier('FollowingHosts_CurrentUser', `query {
+		this.apollo.registerModifier('FollowingHosts_CurrentUser', this.apollo.gql`query {
 			currentUser {
 				followedHosts {
 					nodes {
@@ -114,7 +114,7 @@ export default class Following extends SiteModule {
 			}
 		}`);
 
-		this.apollo.registerModifier('FollowedChannels', `query {
+		this.apollo.registerModifier('FollowedChannels', this.apollo.gql`query {
 			currentUser {
 				followedLiveUsers {
 					nodes {
diff --git a/src/sites/twitch-twilight/modules/directory/game.js b/src/sites/twitch-twilight/modules/directory/game.js
index 09a3fd07..46d7d840 100644
--- a/src/sites/twitch-twilight/modules/directory/game.js
+++ b/src/sites/twitch-twilight/modules/directory/game.js
@@ -22,7 +22,7 @@ export default class Game extends SiteModule {
 			n => n.renderFollowButton && n.renderGameDetailsTab
 		);
 
-		this.apollo.registerModifier('GamePage_Game', `query {
+		this.apollo.registerModifier('GamePage_Game', this.apollo.gql`query {
 			directory {
 				... on Game {
 					streams {
@@ -53,7 +53,7 @@ export default class Game extends SiteModule {
 		const container = this.fine.getHostNode(inst);
 		if ( inst.props.directoryType !== 'GAMES' || ! container || ! container.querySelector )
 			return;
-		
+
 		const buttons = container.querySelector('div > div.tw-align-items-center'),
 			ffz_buttons = buttons && buttons.querySelector('.ffz-buttons');
 
diff --git a/src/sites/twitch-twilight/modules/following_link.off b/src/sites/twitch-twilight/modules/following_link.off
index cb437400..c710f89d 100644
--- a/src/sites/twitch-twilight/modules/following_link.off
+++ b/src/sites/twitch-twilight/modules/following_link.off
@@ -21,7 +21,7 @@ export default class FollowingText extends SiteModule {
 		this.inject('site.apollo');
 		this.inject('i18n');
 
-		this.apollo.registerModifier('FollowedChannels', `query {
+		this.apollo.registerModifier('FollowedChannels', this.apollo.gql`query {
 			currentUser {
 				followedLiveUsers {
 					nodes {
diff --git a/src/utilities/compat/apollo.js b/src/utilities/compat/apollo.js
index 3a21eee0..2c2c2d9d 100644
--- a/src/utilities/compat/apollo.js
+++ b/src/utilities/compat/apollo.js
@@ -7,6 +7,7 @@
 
 import Module from 'utilities/module';
 import {has, get} from 'utilities/object';
+import gql from 'graphql-tag';
 
 export default class Apollo extends Module {
 	constructor(...args) {
@@ -15,10 +16,12 @@ export default class Apollo extends Module {
 		this.modifiers = {};
 		this.post_modifiers = {};
 
+		this.gql = gql;
+
 		this.inject('..web_munch');
 		this.inject('..fine');
 
-		this.registerModifier('ViewerCard', `query {
+		this.registerModifier('ViewerCard', gql`query {
 			targetUser: user {
 				createdAt
 				profileViewCount
@@ -28,8 +31,8 @@ export default class Apollo extends Module {
 
 	async onEnable() {
 		// TODO: Come up with a better way to await something existing.
-		let client = this.client,
-			graphql = this.graphql;
+		let client = this.client;
+			//graphql = this.graphql;
 
 		if ( ! client ) {
 			const root = this.fine.getParent(this.fine.react),
@@ -38,14 +41,14 @@ export default class Apollo extends Module {
 			client = this.client = ctx && ctx.client;
 		}
 
-		if ( ! graphql )
-			graphql = this.graphql = await this.web_munch.findModule('graphql', m => m.parse && m.parseValue);
+		//if ( ! graphql )
+		//	graphql = this.graphql = await this.web_munch.findModule('graphql', m => m.parse && m.parseValue);
 
-		if ( ! client || ! graphql )
+		if ( ! client ) // || ! graphql )
 			return new Promise(s => setTimeout(s,50)).then(() => this.onEnable());
 
 		// Parse the queries for modifiers that were already registered.
-		for(const key in this.modifiers)
+		/*for(const key in this.modifiers)
 			if ( has(this.modifiers, key) ) {
 				const modifiers = this.modifiers[key];
 				if ( modifiers )
@@ -60,7 +63,7 @@ export default class Apollo extends Module {
 							mod[1] = false;
 						}
 					}
-			}
+			}*/
 
 		// Register middleware so that we can intercept requests.
 		this.client.networkInterface.use([{
@@ -145,15 +148,15 @@ export default class Apollo extends Module {
 			if ( ! pre )
 				throw new Error('post modifiers must be functions');
 
-			let parsed;
+			/*let parsed;
 			try {
 				parsed = this.graphql ? this.graphql.parse(modifier, {noLocation: true}) : null;
 			} catch(err) {
 				this.log.error(`Error parsing GraphQL statement for "${operation}" modifier.`, err);
 				parsed = false;
-			}
+			}*/
 
-			modifier = [modifier, parsed];
+			modifier = [modifier, modifier]; // parsed];
 		}
 
 		const mods = pre