Introduce the removeTypenameFromVariables link to remove __typename from variables

.changeset/silent-eagles-check.md

@@ -0,0 +1,7 @@
+---
+'@apollo/client': patch
+---
+
+Introduce the new `removeTypenameFromVariables` link. This link will automatically remove `__typename` fields from `variables` for all operations. This link can be configured to exclude JSON-scalars for scalars that utilize `__typename`. 
+
+This change undoes some work from #10724 where `__typename` was automatically stripped for all operations with no configuration. This was determined to be a breaking change and therefore moved into this link.

.prettierignore

@@ -50,6 +50,11 @@ src/utilities/common/__tests__/*
 !src/utilities/common/__tests__/omitDeep.ts
 !src/utilities/common/__tests__/stripTypename.ts
 
+# Allowed links
+!src/link
+src/link/*
+!src/link/remove-typename
+
 ## Allowed React Hooks
 !src/react/hooks/
 src/react/hooks/*

config/entryPoints.js

@@ -11,6 +11,7 @@ const entryPoints = [
   { dirs: ['link', 'http'] },
   { dirs: ['link', 'persisted-queries'] },
   { dirs: ['link', 'retry'] },
+  { dirs: ['link', 'remove-typename'] },
   { dirs: ['link', 'schema'] },
   { dirs: ['link', 'subscriptions'] },
   { dirs: ['link', 'utils'] },

src/__tests__/__snapshots__/exports.ts.snap

@@ -204,6 +204,12 @@ Array [
 ]
 `;
 
+exports[`exports of public entry points @apollo/client/link/remove-typename 1`] = `
+Array [
+  "removeTypenameFromVariables",
+]
+`;
+
 exports[`exports of public entry points @apollo/client/link/retry 1`] = `
 Array [
   "RetryLink",

src/__tests__/exports.ts

@@ -15,6 +15,7 @@ import * as linkError from "../link/error";
 import * as linkHTTP from "../link/http";
 import * as linkPersistedQueries from "../link/persisted-queries";
 import * as linkRetry from "../link/retry";
+import * as linkRemoveTypename from "../link/remove-typename";
 import * as linkSchema from "../link/schema";
 import * as linkSubscriptions from "../link/subscriptions";
 import * as linkUtils from "../link/utils";
@@ -56,6 +57,7 @@ describe('exports of public entry points', () => {
   check("@apollo/client/link/error", linkError);
   check("@apollo/client/link/http", linkHTTP);
   check("@apollo/client/link/persisted-queries", linkPersistedQueries);
+  check("@apollo/client/link/remove-typename", linkRemoveTypename);
   check("@apollo/client/link/retry", linkRetry);
   check("@apollo/client/link/schema", linkSchema);
   check("@apollo/client/link/subscriptions", linkSubscriptions);

src/link/http/__tests__/HttpLink.ts

@@ -1111,262 +1111,6 @@ describe('HttpLink', () => {
         new Error('HttpLink: Trying to send a client-only query to the server. To send to the server, ensure a non-client field is added to the query or set the `transformOptions.removeClientFields` option to `true`.')
       );
     });
-
-    it('strips __typename from object argument when sending a mutation', async () => {
-      fetchMock.mock('https://example.com/graphql', {
-        status: 200,
-        body: JSON.stringify({
-          data: {
-            __typename: 'Mutation',
-            updateTodo: { 
-              __typename: 'Todo',
-              id: 1,
-              name: 'Take out trash',
-              completed: true 
-            }
-          }
-        }),
-        headers: { 'content-type': 'application/json' }
-      });
-
-      const query = gql`
-        mutation UpdateTodo($todo: TodoInput!) {
-          updateTodo(todo: $todo) {
-            id
-            name
-            completed
-          }
-        }
-      `;
-
-      const link = createHttpLink({ uri: 'https://example.com/graphql' });
-
-      const todo = { 
-        __typename: 'Todo',
-        id: 1,
-        name: 'Take out trash',
-        completed: true,
-      }
-
-      await new Promise((resolve, reject) => {
-        execute(link, { query, variables: { todo } }).subscribe({
-          next: resolve,
-          error: reject
-        });
-      });
-
-      const [, options] = fetchMock.lastCall()!;
-      const { body } = options!
-
-      expect(JSON.parse(body!.toString())).toEqual({
-        operationName: 'UpdateTodo',
-        query: print(query),
-        variables: {
-          todo: {
-            id: 1,
-            name: 'Take out trash',
-            completed: true,
-          }
-        }
-      });
-    });
-
-    it('strips __typename from array argument when sending a mutation', async () => {
-      fetchMock.mock('https://example.com/graphql', {
-        status: 200,
-        body: JSON.stringify({
-          data: {
-            __typename: 'Mutation',
-            updateTodos: [
-              { 
-                __typename: 'Todo',
-                id: 1,
-                name: 'Take out trash',
-                completed: true 
-              },
-              { 
-                __typename: 'Todo',
-                id: 2,
-                name: 'Clean room',
-                completed: true 
-              },
-            ]
-          }
-        }),
-        headers: { 'content-type': 'application/json' }
-      });
-
-      const query = gql`
-        mutation UpdateTodos($todos: [TodoInput!]!) {
-          updateTodos(todos: $todos) {
-            id
-            name
-            completed
-          }
-        }
-      `;
-
-      const link = createHttpLink({ uri: 'https://example.com/graphql' });
-
-      const todos = [
-        { 
-          __typename: 'Todo',
-          id: 1,
-          name: 'Take out trash',
-          completed: true,
-        },
-        { 
-          __typename: 'Todo',
-          id: 2,
-          name: 'Clean room',
-          completed: true,
-        },
-      ];
-
-      await new Promise((resolve, reject) => {
-        execute(link, { query, variables: { todos } }).subscribe({
-          next: resolve,
-          error: reject
-        });
-      });
-
-      const [, options] = fetchMock.lastCall()!;
-      const { body } = options!
-
-      expect(JSON.parse(body!.toString())).toEqual({
-        operationName: 'UpdateTodos',
-        query: print(query),
-        variables: {
-          todos: [
-            {
-              id: 1,
-              name: 'Take out trash',
-              completed: true,
-            },
-            {
-              id: 2,
-              name: 'Clean room',
-              completed: true,
-            },
-          ]
-        }
-      });
-    });
-
-    it('strips __typename from mixed argument when sending a mutation', async () => {
-      fetchMock.mock('https://example.com/graphql', {
-        status: 200,
-        body: JSON.stringify({
-          data: {
-            __typename: 'Mutation',
-            updateProfile: {
-              __typename: 'Profile',
-              id: 1,
-            },
-          }
-        }),
-        headers: { 'content-type': 'application/json' }
-      });
-
-      const query = gql`
-        mutation UpdateProfile($profile: ProfileInput!) {
-          updateProfile(profile: $profile) {
-            id
-          }
-        }
-      `;
-
-      const link = createHttpLink({ uri: 'https://example.com/graphql' });
-
-      const profile = { 
-        __typename: 'Profile',
-        id: 1,
-        interests: [
-          { __typename: 'Interest', name: 'Hiking' },
-          { __typename: 'Interest', name: 'Nature' }
-        ],
-        avatar: {
-          __typename: 'Avatar',
-          url: 'https://example.com/avatar.jpg',
-        }
-      };
-
-      await new Promise((resolve, reject) => {
-        execute(link, { query, variables: { profile } }).subscribe({
-          next: resolve,
-          error: reject
-        });
-      });
-
-      const [, options] = fetchMock.lastCall()!;
-      const { body } = options!
-
-      expect(JSON.parse(body!.toString())).toEqual({
-        operationName: 'UpdateProfile',
-        query: print(query),
-        variables: {
-          profile: {
-            id: 1,
-            interests: [
-              { name: 'Hiking' },
-              { name: 'Nature' }
-            ],
-            avatar: {
-              url: 'https://example.com/avatar.jpg',
-            },
-          },
-        }
-      });
-    });
-  });
-
-  it('strips __typename when sending a query', async () => {
-    fetchMock.mock('https://example.com/graphql', {
-      status: 200,
-      body: JSON.stringify({
-        data: {
-          __typename: 'Query',
-          searchTodos: []
-        }
-      }),
-      headers: { 'content-type': 'application/json' }
-    });
-
-    const query = gql`
-      query SearchTodos($filter: TodoFilter!) {
-        searchTodos(filter: $filter) {
-          id
-          name
-        }
-      }
-    `;
-
-    const link = createHttpLink({ uri: 'https://example.com/graphql' });
-
-    const filter = { 
-      __typename: 'Filter',
-      completed: true,
-    };
-
-    await new Promise((resolve, reject) => {
-      execute(link, { query, variables: { filter } }).subscribe({
-        next: resolve,
-        error: reject
-      });
-    });
-
-    const [, options] = fetchMock.lastCall()!;
-    const { body } = options!
-
-    expect(JSON.parse(body!.toString())).toEqual({
-      operationName: 'SearchTodos',
-      query: print(query),
-      variables: {
-        filter: {
-          completed: true,
-        },
-      },
-    });
   });
 
   describe('Dev warnings', () => {

src/link/http/__tests__/selectHttpOptionsAndBody.ts

@@ -104,25 +104,4 @@ describe('selectHttpOptionsAndBody', () => {
 
     expect(body.query).toBe('query SampleQuery{stub{id}}');
   });
-
-  it('strips __typename from variables', () => {
-    const operation = createOperation(
-      {}, 
-      { 
-        query,
-        variables: { 
-          __typename: 'Test',
-          nested: { __typename: 'Nested', foo: 'bar' },
-          array: [{ __typename: 'Item', baz: 'foo' }]
-        }, 
-      }
-    );
-
-    const { body } = selectHttpOptionsAndBody(operation, {});
-
-    expect(body.variables).toEqual({ 
-      nested: { foo: 'bar' },
-      array: [{ baz: 'foo' }],
-    });
-  })
 });

src/link/http/selectHttpOptionsAndBody.ts

@@ -1,5 +1,4 @@
 import { ASTNode, print } from 'graphql';
-import { stripTypename } from '../../utilities';
 
 import { Operation } from '../core';
 
@@ -180,7 +179,7 @@ export function selectHttpOptionsAndBodyInternal(
 
   //The body depends on the http options
   const { operationName, extensions, variables, query } = operation;
-  const body: Body = { operationName, variables: stripTypename(variables) };
+  const body: Body = { operationName, variables };
 
   if (http.includeExtensions) (body as any).extensions = extensions;