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

Broken React-Apollo example #121

Closed
sinisterra opened this issue Jun 7, 2018 · 6 comments
Closed

Broken React-Apollo example #121

sinisterra opened this issue Jun 7, 2018 · 6 comments

Comments

@sinisterra
Copy link

Hello:

I'm just getting started with apollo-link-rest with the basic configuration in your react-apollo codesandbox.

Instead of displaying the tv show list, the interface shows the following error: : Network error: Failed to execute 'fetch' on 'Window': Invalid credentials mode.

When replicating that code in my own create-react-app environment, I also caught the following error when running a request on Apollo DevTools:

{
  "errors": [
    {
      "message": "forward is not a function",
      "locations": [
        "TypeError: forward is not a function\n    at RestLink../node_modules/apollo-link-rest/bundle.umd.js.RestLink.request (http://localhost:3000/static/js/bundle.js:21028:20)\n    at http://localhost:3000/static/js/bundle.js:19809:33\n    at ApolloLink.request (http://localhost:3000/static/js/bundle.js:17407:12)\n    at ApolloLink.request 
    }
  ]
}

Thanks a lot for your work on this link! It makes working with REST much more manageable by bringing GraphQL-like features for those of us stuck with REST APIs.

@fbartho
Copy link
Collaborator

fbartho commented Jun 7, 2018

@sinisterra When we see forward is not a function in our app, it's usually because we forgot an @client or @rest(…) directive on one of the nodes. Is that the case for you?

In regards to your error with fetch -- what browser are you testing in?

@sinisterra
Copy link
Author

@fbartho No, I'm running exactly the same query from the example, the @rest directive is being applied properly. I'm using Google Chrome 67.0.3396.62. When I tried to run the example in Firefox 60.0.1, it also failed but with a different error: Network error: 'credentials' member of RequestInit 'null' is not a valid value for enumeration RequestCredentials.

@JuHwon
Copy link

JuHwon commented Jun 10, 2018

it's not only about the broken example! I think this issue is very critical.
I am also getting the same error right now, in my production environment which was working fine the last several months using apollo-link-rest. I guess this must be due to a browser update?
I am using chrome Version 67.0.3396.79 (Official Build) (64-bit)

The same issue is happening in safari and firefox.. I totally dont get it tbh.. the same version of my application was working fine since May24.

it is only happening with requests I do with apollo-link-rest, although I've configured my customFetch fn, which is working. ¯_(ツ)_/¯

I am also getting the same error when i remove my customFetch config.

@JuHwon
Copy link

JuHwon commented Jun 10, 2018

I actually found the issue.
I am using a customFetch function, which is called by apollo-link-rest with the options parameter credentials: null. This is causing this error with alle the browsers including the new version of chrome.

my quick fix for my custom fetch function since I am not using credentials is the following:

export function fetchWithAuth(url, options = {}) {
  // this fixes apollo-link-rest providing credentials: null options
  const { credentials, ...opt } = options
  return fetch(url, getOptions(opt));
}

@asteed21
Copy link

I was also banging my head against the wall, getting "Network Error: Failed to Fetch" preventing the query from even executing with apollo-link-rest. @JuHwon is right, this appears to be tied to the credentials option on the RestLink constructor. While formerly it worked as optional per the documentation, I now can only get it to work after including the option like so:

const restLink = new RestLink({  
  uri: ${process.env.REACT_APP_API_URL}/,  
  credentials: 'same-origin',  // eg. or credentials: 'omit', etc
});

fbartho added a commit that referenced this issue Jun 14, 2018
@fbartho
Copy link
Collaborator

fbartho commented Jun 14, 2018

Should be fixed in v0.3.1 -- now available!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants