TypeError: Object(...) is not a function when using createUploadLink with create-react-app

[aeiz]

I get the following error when trying to create a link using createUploadLink:
TypeError: Object(...) is not a function

[jaydenseric]

Are you on the Apollo Slack? If you are, DM me so we can investigate the error; my username is @jaydenseric.

[adamdonahue]

Having an issue using middleware, as well.

Uncaught (in promise) TypeError: Cannot read property '_subscription' of undefined
    at error (zen-observable.js:158)
    at <anonymous>

Code:

const httpLink = createUploadLink({
  uri: process.env.REACT_APP_API_URL || 'http://localhost:8001/api/'
});

const middlewareLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => {
    return {
      credentials: 'include',
      headers: {
        ...headers,
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRFToken': Cookies.get('csrftoken')
      }
    };
  });
  return forward(operation);
});

const link = concat(middlewareLink, httpLink);

Aside from replacing httpLink with the upload version, is further configuration needed?

[adamdonahue]

Ah, this seems to work:

const httpLink = createHttpLink({
  uri: process.env.REACT_APP_API_URL || 'http://localhost:8001/api/'
});

const uploadLink = createUploadLink();

const middlewareLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => {
    return {
      credentials: 'include',
      headers: {
        ...headers,
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRFToken': Cookies.get('csrftoken')
      }
    };
  });
  return forward(operation);
});

const link = concat(middlewareLink, httpLink, uploadLink);

[adamdonahue]

Never mind -- it doesn't actually send any file contents.

[jaydenseric]

@adamdonahue try this:

const authLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    fetchOptions: {
      credentials: 'include',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRFToken': Cookies.get('csrftoken')
      }
    }
  })
  return forward(operation)
})

const uploadLink = createUploadLink({
  uri: process.env.REACT_APP_API_URL || 'http://localhost:8001/api/'
})

const link = authLink.concat(uploadLink)

See #36 (comment).

P.S. I'm not sure 'X-Requested-With': 'XMLHttpRequest' is technically correct, because native fetch is not the same thing.

[adamdonahue]

Yeah, just saw that comment. But shouldn't the standard middleware approach continue to work? Let me give this a shot though.

[adamdonahue]

This worked -- and thanks for the tip on X-Requested-With. Forgot to remove that.

const middlewareLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => {
    return {
      fetchOptions: {
        credentials: 'include',
        headers: {
          ...headers,
          'X-CSRFToken': Cookies.get('csrftoken')
        }
      }
    };
  });
  return forward(operation);
});

const link = concat(middlewareLink, uploadLink);

[jaydenseric]

@aeiz any updates on the error?

[adamdonahue]

Another issue: it appears when I receive an unhandled 403 Forbidden from an endpoint I also get the _subscription issue I mentioned above.

[jaydenseric]

@adamdonahue would you like to create a new issue for that? I'll take a look.

[aeiz]

@jaydenseric sorry it took so long to respond. I wanted to verify that something wasn't amiss with my current project causing this error, so I created a new project (with create-react-app). With a freshly created app, I only installed apollo-upload-client, apollo-link, and graphql, and created a link with createUploadLink and still get the error.

[aeiz]

Here's the contents of my index.js:

import React from "react";
import ReactDOM from "react-dom";
import { createUploadLink } from "apollo-upload-client";

import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";

const link = createUploadLink({
  // Options…
});

ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();

[jaydenseric]

@aeiz did you also npm install the required peer dependencies apollo-link and graphql?

[aeiz]

For a test, I did:

create-react-app apollo-upload-client-test
cd apollo-upload-client-test
npm install apollo-upload-client apollo-link graphql

Then I added the import and link to my index.js:

import { createUploadLink } from "apollo-upload-client";
//...
const link = createUploadLink({
   // Options…
});

Then ran npm start and get the error.