fix(core): Allow path-only URLs to be used with GET requests (#3514)

.changeset/curvy-sheep-drive.md

@@ -0,0 +1,5 @@
+---
+'@urql/core': patch
+---
+
+Allow `url` to be a plain, non-URL pathname (i.e. `/api/graphql`) to be used with `preferGetMethod`

packages/core/src/internal/fetchOptions.test.ts

@@ -70,6 +70,14 @@ describe('makeFetchURL', () => {
     );
   });
 
+  it('returns the URL by default when only a path is provided', () => {
+    const operation = makeOperation(queryOperation.kind, queryOperation, {
+      url: '/graphql',
+    });
+    const body = makeFetchBody(operation);
+    expect(makeFetchURL(operation, body)).toBe('/graphql');
+  });
+
   it('returns a query parameter URL when GET is preferred', () => {
     const operation = makeOperation(queryOperation.kind, queryOperation, {
       ...queryOperation.context,
@@ -82,6 +90,18 @@ describe('makeFetchURL', () => {
     );
   });
 
+  it('returns a query parameter URL when GET is preferred and only a path is provided', () => {
+    const operation = makeOperation(queryOperation.kind, queryOperation, {
+      url: '/graphql',
+      preferGetMethod: true,
+    });
+
+    const body = makeFetchBody(operation);
+    expect(makeFetchURL(operation, body)).toMatchInlineSnapshot(
+      '"/graphql?query=query+getUser%28%24name%3A+String%29+%7B%0A++user%28name%3A+%24name%29+%7B%0A++++id%0A++++firstName%0A++++lastName%0A++%7D%0A%7D&operationName=getUser&variables=%7B%22name%22%3A%22Clara%22%7D"'
+    );
+  });
+
   it('returns the URL without query parameters when it exceeds given length', () => {
     const operation = makeOperation(queryOperation.kind, queryOperation, {
       ...queryOperation.context,

packages/core/src/internal/fetchOptions.ts

@@ -71,18 +71,17 @@ export const makeFetchURL = (
     operation.kind === 'query' && operation.context.preferGetMethod;
   if (!useGETMethod || !body) return operation.context.url;
 
-  const url = new URL(operation.context.url);
+  const urlParts = splitOutSearchParams(operation.context.url);
   for (const key in body) {
     const value = body[key];
     if (value) {
-      url.searchParams.set(
+      urlParts[1].set(
         key,
         typeof value === 'object' ? stringifyVariables(value) : value
       );
     }
   }
-
-  const finalUrl = url.toString();
+  const finalUrl = urlParts.join('?');
   if (finalUrl.length > 2047 && useGETMethod !== 'force') {
     operation.context.preferGetMethod = false;
     return operation.context.url;
@@ -91,6 +90,15 @@ export const makeFetchURL = (
   return finalUrl;
 };
 
+const splitOutSearchParams = (
+  url: string
+): readonly [string, URLSearchParams] => {
+  const start = url.indexOf('?');
+  return start > -1
+    ? [url.slice(0, start), new URLSearchParams(url.slice(start + 1))]
+    : [url, new URLSearchParams()];
+};
+
 /** Serializes a {@link FetchBody} into a {@link RequestInit.body} format. */
 const serializeBody = (
   operation: Operation,