diff --git a/.changeset/four-poets-stare.md b/.changeset/four-poets-stare.md
new file mode 100644
index 00000000000..e1d6a894ff7
--- /dev/null
+++ b/.changeset/four-poets-stare.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": minor
+---
+
+feat(remix-dev): import `.gql` & `.graphql` files as text
diff --git a/packages/remix-dev/compiler/loaders.ts b/packages/remix-dev/compiler/loaders.ts
index b6341d6a09b..99e946d6598 100644
--- a/packages/remix-dev/compiler/loaders.ts
+++ b/packages/remix-dev/compiler/loaders.ts
@@ -7,6 +7,8 @@ export const loaders: { [ext: string]: esbuild.Loader } = {
   ".eot": "file",
   ".flac": "file",
   ".gif": "file",
+  ".gql": "text",
+  ".graphql": "text",
   ".ico": "file",
   ".jpeg": "file",
   ".jpg": "file",
diff --git a/packages/remix-dev/modules.ts b/packages/remix-dev/modules.ts
index 1dfe7c86ac4..41c8eee59b4 100644
--- a/packages/remix-dev/modules.ts
+++ b/packages/remix-dev/modules.ts
@@ -18,6 +18,14 @@ declare module "*.gif" {
   let asset: string;
   export default asset;
 }
+declare module "*.gql" {
+  let asset: string;
+  export default asset;
+}
+declare module "*.graphql" {
+  let asset: string;
+  export default asset;
+}
 declare module "*.jpeg" {
   let asset: string;
   export default asset;
@@ -60,6 +68,10 @@ declare module "*.png" {
   let asset: string;
   export default asset;
 }
+declare module "*.sql" {
+  let asset: string;
+  export default asset;
+}
 declare module "*.svg" {
   let asset: string;
   export default asset;