Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature idea: Automatically remove `__typename` from mutations #2160

Closed
benhjames opened this issue Sep 15, 2017 · 15 comments

Comments

Projects
None yet
10 participants
@benhjames
Copy link
Contributor

commented Sep 15, 2017

I tend to do mutations like this a lot of the time:

// `data` comes from a query result
updateMutation({
  ...data,
  changedValue: "this is a changed value, the rest are the same",
})

This may look unusual, but let's assume that for some reason the database requires you to pass the entire object rather than just modified fields (e.g. a JSONB update)

However, unfortunately data has __typename automatically added to it, which my schema doesn't expect in a mutation!

I've written a helper function to strip __typename recursively just before the mutation is sent off:

const removeTypename = (value: any) => {
  if (value === null || value === undefined) {
    return value;
  } else if (Array.isArray(value)) {
    return value.map(v => removeTypename(v));
  } else if (typeof value === 'object') {
    const newObj = {};
    Object.entries(value).forEach(([key, v]) => {
      if (key !== '__typename') {
        newObj[key] = removeTypename(v);
      }
    });
    return newObj;
  }
  return value;
};

It could be cool if this were integrated into the client, but turned off by default.

What do you think? 🙂

@jjant

This comment has been minimized.

Copy link

commented Sep 25, 2017

Why use a property like __typename instead of something like a symbol property that doesn't break mutations?

@stale

This comment has been minimized.

Copy link

commented Oct 16, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!

@stale stale bot added the no-recent-activity label Oct 16, 2017

@stale

This comment has been minimized.

Copy link

commented Oct 30, 2017

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Apollo Client!

@stale stale bot closed this Oct 30, 2017

@patrickreck

This comment has been minimized.

Copy link

commented Feb 23, 2018

👍 This is still very relevant

@testarossaaaaa

This comment has been minimized.

Copy link

commented Mar 16, 2018

This can be realized through apollo links.

@testarossaaaaa

This comment has been minimized.

@danderson00

This comment has been minimized.

Copy link

commented May 3, 2018

There are lots of people hitting this issue. This issue should definitely not be closed without explanation.

It is a cardinal sin for a library to modify incoming objects and expect developers to implement hacky, manual workarounds to deal with the modification.

Is there any intent for the maintainers to improve the situation?

@sbrichardson

This comment has been minimized.

Copy link

commented Jun 19, 2018

@stubailo Is there an option/workaround for this currently?

I know in the client config you can specify not to include __typename, globally I believe, but I do need __typename sometimes. It would be nice to be able to specify to not include it per request (I'm using Apollo.client.mutate). There are lots of nested types sometimes. This issue comes up when updating data in stages, complex mutations, using the resulting data in the next mutation, etc.

Edit: This code I found on another issue works for me.

-> Is it possible to use an apollo-link only for certain queries?

function createOmitTypenameLink() {
  return new ApolloLink((operation, forward) => {
    if (operation.variables) {
      operation.variables = JSON.parse(JSON.stringify(operation.variables), omitTypename)
    }

    return forward(operation)
  })
}

function omitTypename(key, value) {
  return key === '__typename' ? undefined : value
}
@francoisromain

This comment has been minimized.

Copy link

commented Oct 12, 2018

@danderson00 How do you handle this finally?

@danderson00

This comment has been minimized.

Copy link

commented Oct 13, 2018

@francoisromain Pretty much as in the code in the comment above by @sbrichardson.

@ValdoGhafoor

This comment has been minimized.

Copy link

commented Dec 12, 2018

Using @sbrichardson solution without more check breaks file upload from client side, be careful !

@SirwanAfifi

This comment has been minimized.

Copy link

commented Jan 26, 2019

I am wondering why I get this error in the console:

Error: You are calling concat on a terminating link, which will have no effect
    at new LinkError (linkUtils.js:47)
    at concat (link.js:38)
    at ApolloLink../node_modules/apollo-link/lib/link.js.ApolloLink.concat (link.js:65)
    at link.js:13
    at Array.reduce (<anonymous>)
    at Function.from (link.js:13)
    at Object../src/graphql/ApolloClient.ts (ApolloClient.ts:20)
    at __webpack_require__ (bootstrap cc8125b9b24223eb2f2d:678)
    at fn (bootstrap cc8125b9b24223eb2f2d:88)
    at Object../src/graphql/index.ts (index.ts:1)
    at __webpack_require__ (bootstrap cc8125b9b24223eb2f2d:678)
    at fn (bootstrap cc8125b9b24223eb2f2d:88)
    at Object../src/containers/Albums.tsx (Albums.tsx:1)
    at __webpack_require__ (bootstrap cc8125b9b24223eb2f2d:678)
    at fn (bootstrap cc8125b9b24223eb2f2d:88)
    at Object../src/pages/AlbumList.tsx (AddAlbum.tsx:116)
    at __webpack_require__ (bootstrap cc8125b9b24223eb2f2d:678)
    at fn (bootstrap cc8125b9b24223eb2f2d:88)
    at Object../src/App.tsx (App.css?ef86:26)
    at __webpack_require__ (bootstrap cc8125b9b24223eb2f2d:678)
    at fn (bootstrap cc8125b9b24223eb2f2d:88)
    at Object../src/index.tsx (index.tsx:1)
    at __webpack_require__ (bootstrap cc8125b9b24223eb2f2d:678)
    at fn (bootstrap cc8125b9b24223eb2f2d:88)
    at Object.0 (album.ts:10)
    at __webpack_require__ (bootstrap cc8125b9b24223eb2f2d:678)
    at bootstrap cc8125b9b24223eb2f2d:724
    at bootstrap cc8125b9b24223eb2f2d:724

Here's my apollo client setup:

import { InMemoryCache, ApolloLink } from "apollo-boost";
import config from "./../config";
import { ApolloClient } from "apollo-client";
import { createUploadLink } from "apollo-upload-client";
const uploadLink = createUploadLink({
  uri: config.graphql.url
});

const createOmitTypenameLink = new ApolloLink((operation, forward) => {
  if (operation.variables) {
    operation.variables = JSON.parse(
      JSON.stringify(operation.variables),
      (key, value) => (key === "__typename" ? undefined : value)
    );
  }
  return forward ? forward(operation) : null;
});

export const apolloClient = new ApolloClient({
  link: ApolloLink.from([uploadLink, createOmitTypenameLink]),
  cache: new InMemoryCache()
});

It seems that createOmitTypenameLink doesn't work. any idea?

@sbrichardson

This comment has been minimized.

Copy link

commented Feb 26, 2019

Using @sbrichardson solution without more check breaks file upload from client side, be careful !

@ValdoGhafoor, I'm handling file uploads separately because of the client batching issues with file uploads. I've been using for the last few months like this with no issues.

Partial example:

/**
 * Apollo Terminating link
 * The split will skip Batching if an
 * operation's context contains hasUpload = true value
 */
const httpLink = ApolloLink.split(
  o => o.getContext().hasUpload,
  createUploadLink(OPTS),
  ApolloLink.from([createOmitTypenameLink(), new BatchHttpLink(OPTS)])
)
@ValdoGhafoor

This comment has been minimized.

Copy link

commented Mar 29, 2019

@sbrichardson
I personnaly had to add two more "checks" :
One to check for circular dependencies in variables and one for files.
I personnally never had any issue with file upload

const cleanTypenameLink = new ApolloLink((operation, forward) => {
  const omitTypename = (key, value) => (key === '__typename' ? undefined : value);

  if (operation.variables && !operation.variables.file) {
    // eslint-disable-next-line
    operation.variables = CircularJSON.parse(CircularJSON.stringify(operation.variables), omitTypename);
  }

  return forward(operation);
});
@dimitar-nikovski

This comment has been minimized.

Copy link

commented May 23, 2019

slightly hacky: MyType { Id, SomeProps, __typename @include(if: false) }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.