diff --git a/aleksis/core/assets/components/notifications/NotificationItem.vue b/aleksis/core/assets/components/notifications/NotificationItem.vue
index dea29654a5ddf833ec3433c3f63d4a5d8b0c714d..6c05b112e4afadb58f51ef71ac0c76451508415f 100644
--- a/aleksis/core/assets/components/notifications/NotificationItem.vue
+++ b/aleksis/core/assets/components/notifications/NotificationItem.vue
@@ -1,15 +1,6 @@
 <template>
   <ApolloMutation
-    :mutation="gql => gql`
-      mutation ($id: ID!) {
-        markNotificationRead(id: $id) {
-          notification {
-            id
-            read
-          }
-        }
-      }
-    `"
+    :mutation="require('./markNotificationRead.graphql')"
     :variables="{ id: this.notification.id }"
   >
     <template v-slot="{ mutate, loading, error }">
diff --git a/aleksis/core/assets/components/notifications/NotificationList.vue b/aleksis/core/assets/components/notifications/NotificationList.vue
index 815d66aef5d52652bbe332db44b0f17d303621c0..8428fd7115cafdbfa92b74c9c2655ed043b23de7 100644
--- a/aleksis/core/assets/components/notifications/NotificationList.vue
+++ b/aleksis/core/assets/components/notifications/NotificationList.vue
@@ -1,17 +1,6 @@
 <template>
   <ApolloQuery
-    :query="gql => gql`{
-      myNotifications: whoAmI {
-        notifications {
-          id
-          title
-          description
-          link
-          created
-          sender
-        }
-      }
-    }`"
+    :query="require('./myNotifications.graphql')"
     :pollInterval="1000"
   >
     <template v-slot="{ result: { error, data }, isLoading }">
diff --git a/aleksis/core/assets/components/notifications/markNotificationRead.graphql b/aleksis/core/assets/components/notifications/markNotificationRead.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..8cc7bed4325857b3407701900a356150d3614b68
--- /dev/null
+++ b/aleksis/core/assets/components/notifications/markNotificationRead.graphql
@@ -0,0 +1,8 @@
+mutation ($id: ID!) {
+  markNotificationRead(id: $id) {
+    notification {
+      id
+      read
+    }
+  }
+}
diff --git a/aleksis/core/assets/components/notifications/myNotifications.graphql b/aleksis/core/assets/components/notifications/myNotifications.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..efa51f2c82e523ef2d5515e88536a0c6b08005ef
--- /dev/null
+++ b/aleksis/core/assets/components/notifications/myNotifications.graphql
@@ -0,0 +1,12 @@
+{
+  myNotifications: whoAmI {
+    notifications {
+      id
+      title
+      description
+      link
+      created
+      sender
+    }
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
index d41985b0bf38ab2fb910763c2b8246fc33469afa..afdbda23a36a30e458d8cf6102126d1cda3b329e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -59,6 +59,11 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: 'graphql-tag/loader',
+      },
     ],
   },
   optimization: {