Apollo-client: [Crash] Object.setPrototypeOf(_this, ApolloError.prototype) on 2.2.8

[alexmbp]

I'm trying to do simple mutation and actually network request is happening and I'm receiving response. In case when response is error - code brakes immediately. Issue arrived only after update to 2.2.8. Downgrade to 2.2.7 helped and everything working as expected.

I'm using TypeScript compiler (latest one) and TSLib (latest one).

Version

• [email protected]

• [x] blocking

[seklyza]

+1 I'm also getting this error on Android when trying to do a simple mutation (create-react-native-app project)

[alexmbp]

@seklyza Same here. Issue - android only. Are you using TS or something before RN babel?

[seklyza]

@alexmbp No. Just plain CRNA project. Not using TypeScript or something like that.

[lxcid]

+1, i think bundle.umd.js is using Object.setPrototypeOf which return undefined in Android.

Object.setPrototypeOf(_this, ApolloError.prototype);

See

https://github.com/realm/realm-js/pull/1195/files

[doraeminemon]

Any way to sidestep this for now ?

[lxcid]

As noted by the original author of this post:

Downgrade to 2.2.7 helped and everything working as expected.

[ropaillet]

Downgraded and not working :( any other solutions ? @lxcid , in what file do the changes you referred go ? Couldn´t find any realm package between mines.

[chrisehlee]

This is frustrating. Been trying to figure out what went wrong for the past few days. Downgraded mine as suggested but I still get the same old errors. As noted earlier by @doraeminemon , any sidestep would be appreciated.

[dozoisch]

@chrisehlee what exact version did you put in your package.json when downgrading? make sure to pin, because otherwise it'll resolve latest.

[chrisehlee]

@dozoisch For clarity here's the relevant part of my package.json

"apollo-boost": "^0.1.4", "apollo-client": "2.2.7", "apollo-link-context": "^1.0.7", "react-apollo": "2.1.0-beta.3", "react-native": "0.53.3", "graphql": "^0.13.2", "graphql-tag": "^2.8.0",

[FabricioCabeca]

@chrisehlee [email protected] depends on [email protected], so you probably have both installed and is actually using 2.2.8, try downgrading apollo-boost to 0.1.3 instead.

[chrisehlee]

NB: I'm using wix/react-native-navigation and aws-amplify(-react-native).

@FabricioCabeca I've downgraded every related package but I'm still stuck.
Queries work almost fine except when response is error. Mutations, not so much.
Please anybody with a workaround is greatly appreciated.

"apollo-boost": "0.1.3",
"apollo-client": "2.2.7",
"graphql": "0.13.1",
"graphql-tag": "^2.8.0",
"react-apollo": "2.1.0-beta.3"

[alexmbp]

Apollo boost still require ^2.2.7 which means version 2.2.8 is installed for you. I did have similar issue. I’ve fixed it by forcing webpack to use root node_modules, but it brakes a lot.
I think you have [email protected] in root and [email protected] in node_modules/Apollo-boost/node_modules.

[chrisehlee]

@alexmbp Woah, you're spot .. dug in and saw exactly what you said.
Installing
"react-apollo": "2.1.0-rc.5"
did the trick of getting mutations to work. But every error response still crashes the app.
Thanks everyone.

[padil]

Any solutions to this?

I am using react-native with react-apollo

[FabricioCabeca]

@chrisehlee actually I've just downgraded apollo-boost and apollo-client, react-apollo is at 2.1.2, here are my deps, working fine here:

  "dependencies": {
    "apollo-boost": "^0.1.3",
    "apollo-client": "^2.2.7",
    "axios": "^0.18.0",
    "expo": "^25.0.0",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.8.0",
    "query-string": "^6.0.0",
    "react": "16.2.0",
    "react-apollo": "^2.1.2",
    "react-native": "0.52.0",
    "react-native-masked-text": "^1.6.5",
    "react-native-scripts": "^1.11.1",
    "react-native-side-menu": "^1.1.3"
  }

[chrisehlee]

@FabricioCabeca I'm glad that worked for you and it's hard to go through all this hurdles .. however, any chance the official team is looking into this?

[atkit]

ok, workaround works, next step is to fix setPrototypeOf...

...ref that might work...
https://github.com/realm/realm-js/pull/1195/files

[chrisehlee]

@atkit Hello, any word yet?

[melloflavio]

@chrisehlee
I noticed there's an open PR#3306.
I'm not sure how long it will take for it to be accepted.

In the meantime, I'm doing the same as @FabricioCabeca and bump down apollo-client to 2.2.7. The initial tests went OK...

[chrisehlee]

@melloflavio
I've done the same too .. however let's hope the PR gets reviewed and officially merged.

Thanks.

[MichelDiz]

For me Downgrade apollo-boost doesn't work. By the way, who use apollo-boost don't need apollo-client. It's built in. I'm using React-native (Had this with expo too).

[seklyza]

@MichelDiz downgrading apollo-boost did not work either, I had to replace apollo-boost with the alternatives (client, link, cache, etc)

[MichelDiz]

That's odd and boring, I'll have to do the same.

PS: Downgrade for what FabricioCabeca says is working, doesn't work at all. This happens only on Android. IOS works great. Two days gone now.

[padupuy]

Here is my workaround

1. Create a patch file apollo.patch with this content :

--- node_modules/apollo-client/bundle.umd.js    2018-04-25 15:16:30.000000000 +0200
+++ bundle.umd.js   2018-04-25 15:16:49.000000000 +0200
@@ -128,7 +128,7 @@
             _this.message = errorMessage;
         }
         _this.extraInfo = extraInfo;
-        Object.setPrototypeOf(_this, ApolloError.prototype);
+        _this.__proto__ = ApolloError.prototype;
         return _this;
     }
     return ApolloError;

1. Add a postinstall hook to package.json

    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "postinstall": "patch -p0 < patch/apollo.patch || true"
    },

1. Now when you or your CI will install the dependencies, the patch will be apply.

The patch has been created from the commande line from PR PR#3306 :

diff -u node_modules/apollo-client/bundle.umd.js bundle.umd.js> apollo.patch

[MichelDiz]

@padupuy Thank you very much! u saved my sanity!
It's working perfectly on Android, work like a charm. I'll no longer lose hair!
You're a good person xD

[The-FZ]

Where to write the apollo.patch ?
How to do that can you please elaborate as I am completely new to graphQl and apollo thing.
Thank you and hope to see your answers real soon.

[MichelDiz]

@The-FZ

1 - Create a simple file with the name "apollo.patch" at the root of your application or create a folder with the name "patch".
2 - Paste the code from padupuy in this apollo.patch file and save.
3 - Go to your package.json and add this to your "scripts":
if you put the patch file at root"postinstall": "patch -p0 < apollo.patch || true",
if you put the patch file inside the patch "postinstall": "patch -p0 < patch/apollo.patch || true"
4 - Save all and open your terminal in the same path. Run "npm run postinstall" or "yarn postinstall"
Done.

PS: I used Yarn, It was right away.

[The-FZ]

Thank you guys it worked. @MichelDiz @padupuy .

[Monte9]

I ran into this as well and it's so frustrating that something so crucial as running apollo-client + react native android is not working when graphql returns an error response.

/cc @peggyrayzis

Luckily, @FabricioCabeca's solution worked out. Thanks a lot 🎉

Just to reiterate, here is what fixed it for me:

1. Change the following package.json versions:

"apollo-boost": "0.1.3",
"apollo-client": "2.2.7",
"react-apollo": "2.1.2",

1. Clean install your npm packages

rm -rf node_modules
npm install

1. Start react native packager with cache clean

react-native start --reset-cache

And hopefully, that should do it. Hope this helps.

[Tommos0]

+1, took me hours to get at this error.
My <Query /> would just never update and keep loading forever. So I wasn't even getting an exception anywhere (I guess it was caught somewhere in Apollo Client).

My workaround: a simple polyfill:

Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
  obj.__proto__ = proto
  return obj
}

[ujwal-setlur]

@Tommos0, thanks! Your polyfill worked!

[DiwakarShukla1]

Polyfill worked for me too. @Tommos0 thank you very much.

[hwillson]

PR https://github.com/apollographql/apollo-client/pull/3306 has been merged (and will be included in the next apollo-client release). Thanks for the additional troubleshooting details everyone, and thanks @seklyza for working on a fix!

[seklyza]

Thank you guys. It was a pleasure to work with you.

On Mon, May 14, 2018, 13:52 Hugh Willson [e-mail] wrote:

PR #3306 https://github.com/apollographql/apollo-client/pull/3306 has
been merged (and will be included in the next apollo-client release).
Thanks for the additional troubleshooting details everyone, and thanks
@seklyza https://github.com/seklyza for working on a fix!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/apollo-client/issues/3236#issuecomment-388776642,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMYKLFtrdw9vQJhw8-1bURN_QInhtGBLks5tyWHrgaJpZM4TBt4c
.

[rizwan92]

i am also getting the same error is there any solution
undefined is not a function (evaluating 'Object.setPrototypeOf(_this, ApolloError.prototype)' ) on 2.2.7
what should i do?

[sijad]

same here

@Tommos0 workaround worked form me,

@rizwan92 you can use @Tommos0 workaround until next release, just paste that code into app.js.

[dafapramudya]

Same issue,

Here is my App.js

import React, { Component } from 'react';
import { addNavigationHelpers } from 'react-navigation';
import { createReduxBoundAddListener } from 'react-navigation-redux-helpers';
import { Provider, connect } from 'react-redux';
// import { , HttpLink, InMemoryCache} from 'apollo-client-preset'
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo'

import RootNavigators from './src/navigator/RootNavigators';
import store from './src/redux/store';

const client = new ApolloClient({ uri: 'http://104.41.189.67:3001/graphiql?' });

const addListener = createReduxBoundAddListener("root");

class App extends Component {
  render() {
    return (
      <RootNavigators navigation={{
        dispatch: this.props.dispatch,
        state: this.props.nav,
        addListener,
      }} />
    );
  }
}

const mapStateToProps = (state) => ({
  nav: state.nav
});

const AppWithNavigationState = connect(mapStateToProps)(App);

export default class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        <ApolloProvider client={client}>
          <AppWithNavigationState />
        </ApolloProvider>
      </Provider>
    );
  }
}`

GraphQL query mutation:

export default graphql(
  gql`
    mutation($phone_or_email: String!, $must_unique: Boolean){
      userRegister(input: {phone_or_email: $phone_or_email, must_unique: $must_unique}){
        token
        resend_time
        phone_or_email
      }
    }`,
    {
      props: ({ mutate }) => ({
        RegisterValidationRequest: (phone_or_email, must_unique) => mutate({ variables: { phone_or_email, must_unique } }),
      }),
    },
)(Register)

handleSubmit:
````
handleSubmit = () => {
const {phone_or_email, must_unique} = this.state;

this.props.RegisterValidationRequest(phone_or_email, must_unique).then(({data}) => {
  this.props.navigation.navigate("VeryfRegister", {noHp: phone_or_email, mu: must_unique})
})

}
````

Please help me

Thank you

[ujwal-setlur]

@dafapramudya did you actually try the polyfill? I don't see it in your code?

[ujwal-setlur]

Folks, solutions have been proposed here. Please confirm you have tried the solution before you say you still see the problem.

[dafapramudya]

@ujwal-setlur how can i use polyfill? i'm sorry if I ask a lot, because I never use polyfill

where i can put this code?

Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
  obj.__proto__ = proto
  return obj
}

@Tommos0 @ujwal-setlur

Thank you

[dafapramudya]

SOLVED thank you @Tommos0 @ujwal-setlur. Solved using polyfill

[Seunope]

I also experienced this same issue. I tried all the solutions above but none worked. I later discovered that apolloClient was pointing to the wrong url. When i fixed this, the error disappeared

```
import React from 'react';
import {AsyncStorage} from 'react-native';
import ApolloClient from 'apollo-boost';
import gql from "graphql-tag";

export const client = new ApolloClient({
// uri: 'http://192.168.1.17:4800/graphql', =>wrong IP address
uri: 'http://192.168.1.107:4800/graphql',

request: async (operation) => {
const token = await AsyncStorage.getItem('@keep_token');
if(token){
operation.setContext({
headers: {
authorization: token ? Bearer ${token} : null
}
});
}
}
});