fix(execute-exchange): prune undefined variables

.changeset/shiny-bags-serve.md

@@ -0,0 +1,5 @@
+---
+'@urql/exchange-execute': patch
+---
+
+Support using default values with directives. Previously, using a variables with a default value within a directive would fail the validation if it is empty.

exchanges/execute/src/execute.test.ts

@@ -22,7 +22,11 @@ import {
   empty,
   Source,
 } from 'wonka';
-import { queryOperation, subscriptionOperation } from '@urql/core/test-utils';
+import {
+  context,
+  queryOperation,
+  subscriptionOperation,
+} from '@urql/core/test-utils';
 import {
   makeErrorResult,
   makeOperation,
@@ -182,6 +186,45 @@ describe('on operation', () => {
     expect(mocked(execute)).toBeCalledTimes(1);
     expect(fetchMock).toBeCalledTimes(1);
   });
+
+  it('should trim undefined values before calling execute()', async () => {
+    const contextValue = 'USER_ID=123';
+
+    const operation = makeOperation(
+      'query',
+      {
+        ...queryOperation,
+        variables: { ...queryOperation.variables, withLastName: undefined },
+      },
+      context
+    );
+
+    await pipe(
+      fromValue(operation),
+      executeExchange({ schema, context: contextValue })(exchangeArgs),
+      take(1),
+      toPromise
+    );
+
+    expect(mocked(execute)).toBeCalledTimes(1);
+    expect(mocked(execute)).toBeCalledWith({
+      schema,
+      document: queryOperation.query,
+      rootValue: undefined,
+      contextValue: contextValue,
+      variableValues: queryOperation.variables,
+      operationName: expectedQueryOperationName,
+      fieldResolver: undefined,
+      typeResolver: undefined,
+      subscribeFieldResolver: undefined,
+    });
+
+    const variables = mocked(execute).mock.calls[0][0].variableValues;
+
+    for (const key in variables) {
+      expect(variables[key]).not.toBeUndefined();
+    }
+  });
 });
 
 describe('on success response', () => {

exchanges/execute/src/execute.ts

@@ -141,13 +141,25 @@ export const executeExchange = ({
 
         const contextValue =
           typeof context === 'function' ? context(operation) : context;
+
+        // Filter undefined values from variables before calling execute()
+        // to support default values within directives.
+        const variableValues = Object.create(null);
+        if (operation.variables) {
+          for (const key in operation.variables) {
+            if (operation.variables[key] !== undefined) {
+              variableValues[key] = operation.variables[key];
+            }
+          }
+        }
+
         return pipe(
           makeExecuteSource(operation, {
             schema,
             document: operation.query,
             rootValue,
             contextValue,
-            variableValues: operation.variables,
+            variableValues,
             operationName: getOperationName(operation.query),
             fieldResolver,
             typeResolver,

exchanges/graphcache/default-storage/package.json

@@ -16,7 +16,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@urql/core": ">=2.3.3",
+    "@urql/core": ">=2.3.6",
     "wonka": "^4.0.14"
   }
 }