diff --git a/web/ui/mantine-ui/src/api/responseTypes/query.ts b/web/ui/mantine-ui/src/api/responseTypes/query.ts
index 6fcf09f1b..327b049b5 100644
--- a/web/ui/mantine-ui/src/api/responseTypes/query.ts
+++ b/web/ui/mantine-ui/src/api/responseTypes/query.ts
@@ -42,3 +42,10 @@ export type InstantQueryResult =
       resultType: "string";
       result: SampleValue;
     };
+
+// Result type for /api/v1/query_range endpoint.
+// See: https://prometheus.io/docs/prometheus/latest/querying/api/#range-queries
+export type RangeQueryResult = {
+  resultType: "matrix";
+  result: RangeSamples[];
+};
diff --git a/web/ui/mantine-ui/src/pages/query/Graph.tsx b/web/ui/mantine-ui/src/pages/query/Graph.tsx
index 87d4217a3..38810443a 100644
--- a/web/ui/mantine-ui/src/pages/query/Graph.tsx
+++ b/web/ui/mantine-ui/src/pages/query/Graph.tsx
@@ -1,7 +1,10 @@
 import { FC, useEffect, useId, useState } from "react";
 import { Alert, Skeleton, Box, LoadingOverlay } from "@mantine/core";
 import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react";
-import { InstantQueryResult } from "../../api/responseTypes/query";
+import {
+  InstantQueryResult,
+  RangeQueryResult,
+} from "../../api/responseTypes/query";
 import { SuccessAPIResponse, useAPIQuery } from "../../api/api";
 import classes from "./Graph.module.css";
 import {
@@ -43,7 +46,7 @@ const Graph: FC<GraphProps> = ({
   const effectiveResolution = getEffectiveResolution(resolution, range) / 1000;
 
   const { data, error, isFetching, isLoading, refetch } =
-    useAPIQuery<InstantQueryResult>({
+    useAPIQuery<RangeQueryResult>({
       key: useId(),
       path: "/query_range",
       params: {
@@ -60,7 +63,7 @@ const Graph: FC<GraphProps> = ({
   // 2. We want to keep displaying the old range in the chart while a query for a new range
   //    is still in progress.
   const [dataAndRange, setDataAndRange] = useState<{
-    data: SuccessAPIResponse<InstantQueryResult>;
+    data: SuccessAPIResponse<RangeQueryResult>;
     range: UPlotChartRange;
   } | null>(null);
 
@@ -122,19 +125,7 @@ const Graph: FC<GraphProps> = ({
     return <Alert variant="transparent">No data queried yet</Alert>;
   }
 
-  const { result, resultType } = dataAndRange.data.data;
-
-  if (resultType !== "matrix") {
-    return (
-      <Alert
-        title="Invalid query result"
-        icon={<IconAlertTriangle size={14} />}
-      >
-        This query returned a result of type "{resultType}", but a matrix was
-        expected.
-      </Alert>
-    );
-  }
+  const { result } = dataAndRange.data.data;
 
   if (result.length === 0) {
     return (