Cannot compose createUploadLink

[flemwad]

This was mentioned in #35 already, but I'm still experiencing the same issue when trying to compose any other link with createUploadLink.

My code:

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

const cleanTypenameFieldLink = new ApolloLink((operation, forward) => {
    if (operation.variables) {
        operation.variables = JSON.parse(JSON.stringify(operation.variables), omitTypename)
    }

    return forward(operation)
});

const uri = 'http://localhost:8080';
const uploadLink = createUploadLink({ uri });
const appLink = cleanTypenameFieldLink.concat(uploadLink);

// Apollo client
const client = new ApolloClient({
    link: appLink,
    cache: new InMemoryCache(),
    credentials: 'same-origin'
});

I've tried a combination of:

1)
concat(uploadLink, cleanTypenameFieldLink)
uploadLink.concat(cleanTypenameFieldLink)

my custom cleanTypenameFieldLink doesn't run, but the file will upload

The order above throws an apollo-link warning:
You are calling concat on a terminating link, which will have no effect

2)
concat(cleanTypenameFieldLink, uploadLink),
cleanTypenameFieldLink.concat(uploadLink);
While this seems to work, but the upload promise is undefined when it hits the server. Which I'm assuming means the clientUploadLink never was ran when last.

3)
I've also tried the fix mentioned in the bottom of the issue of referencing the build index.js directly, to no avail.

4)
Assumed my custom link wasn't working and tried something simple like HttpLink, I had the same results as 1 and 2 from above.

In that issue it was mentioned this might be a .mjs and CRA issue, but I've ejected my CRA and confirmed I have the merged code from the mentioned CRA PR in #35. Which just seemed to be CRA support for .mjs extensions.

If I've missed anything please let me know! Everything has worked great otherwise, so thank you.

[jaydenseric]

That error makes sense, it looks like you are concatenating the links in the wrong order. apollo-upload-client is a "terminating" link; that means no link can be concatenated after because it is the end of the road for sending the request off.

[flemwad]

As mentioned in 1) and 2) I've tried it both ways. With uploadLink last as well.

It appears to me what's happening is:

When I don't compose it and just use the straight up uploadLink

const uploadLink = createUploadLink({ uri });

const client = new ApolloClient({
    link: uploadLink,
    cache: new InMemoryCache(),
    credentials: 'same-origin' //TODO: Make this more stringent on prod
});

I'm getting an upload "Promise" on the server side, which then lets me resolve the stream from it:

upload:
   Promise {
     { stream: [Object],
     filename: 'cool2.png',
     mimetype: 'image/png',
     encoding: '7bit' } }

But, when I compose the link with my custom link:

import cleanTypenameFieldLink from './utils/cleanTypenameFieldLink';
const uploadLink = createUploadLink({ uri });
const appLink = concat(cleanTypenameFieldLink, uploadLink);

// Apollo client
const client = new ApolloClient({
    link: appLink,
    cache: new InMemoryCache(),
    credentials: 'same-origin' //TODO: Make this more stringent on prod
});

The response on my server I just get a "preview" file upload, and no promise to resolve:

upload:
   { preview: 'blob:http://localhost:3333/e514498c-3031-403c-96ea-349b2bd120d7' }

I'm not sure if I did something wrong? But before I wrote my code depending on a promise being sent to the server. So that's breaking.

[dbelchev]

@flemwad, I assume that you have other problem here, but according to Apollo-link docs you can compose the links as follows:
let link = ApolloLink.from([errorLink, middlewareLink, apolloUploadLink]);
The above is working for me in my project without any problem with apolloUploadLink.

[flemwad]

@dbelchev I'm aware you can concat in that manner too. I tried that and it yielded the same result:

import cleanTypenameFieldLink from './utils/cleanTypenameFieldLink';
const uploadLink = createUploadLink({ uri });

// Apollo client
const client = new ApolloClient({
    link: ApolloLink.from([cleanTypenameFieldLink, uploadLink]),
    cache: new InMemoryCache(),
    credentials: 'same-origin' //TODO: Make this more stringent on prod
});

Which is a un-promised preview file on the server:

upload:
   { preview: 'blob:http://localhost:3333/3a4284ce-0ffd-4eed-b80b-3a6262d7ee3a' }

or upload simply ends up null as shown below.

The only thing I can think is that I'm using the scalar Upload type as a nested property on a larger input type at this point:

export const PhotoInput = `
    scalar Upload

    input PhotoInput {
        id: String!
        postName: String!
        whatToDo: String!
        unixTime: Int!
        bounty: Float
        upload: Upload!
        meta: PhotoMetaInput!
    }
`;

Here's what my object looks like before sending:

Note that this input works when un-composed, and doesn't include the "__typename" prop.

Here's the same object console.logged in an extremely dumb link function showing that the photoInput upload property has changed:

export default new ApolloLink((operation, forward) => {
    console.log('after', operation);
    return forward(operation)
});

At this point, depending on what the "dumb" link does, upload either ends up: null or just a preview blob, and I can't execute the promise on the server.

[flemwad]

This was an issue with my own link. Closing, and I apologize for any confusion.

[smithaitufe]

@flemwad Please how did you resolve your issue? If you don't mind, can you look at this #64

Currently, I can't even do a post to my server.

[kojuka]

yes @flemwad I'm getting the same thing. please let us know how you fixed it.

[g-borgulya]

I have exactly the same issue, no idea how to figure out the cause of the problem.
Any ideas plesae how to start solving such an issue? It seems it could be valuable for others as well.

Maybe it would be also very useful if someone could provide an example how to correctly create a complex link both on the client and using ssr, and how to use it if the graphql schema is a bit more complex.

[smithaitufe]

I decided to avoid this package. I send base64 of whatever I want to upload to the server.

[bennypowers]

I have a requestLink which routes requests depending on if they are subscriptions or queries, which is a terminating link. That means that I have to choose between using uploadLink and requestLink? Is it not possible to use this package with another terminating link?

[jaydenseric]

@bennypowers you can't have 2 terminating links, because, well, they are terminating. The last one will never happen! You can use the Apollo link .split() method to create a fork on some sort of logic to choose which link to terminate with.

[bennypowers]

My implementation, based on @Zn4rK's work, for avoiding ' You are calling concat on a terminating link, which will have no effect` while still using Batching etc.

import { getMainDefinition } from 'apollo-utilities';
import { split } from 'apollo-link';
import { httpLink } from './httpLink.js';
import { wsLink } from './wsLink.js';
import { uploadLink } from './uploadLink.js';

const isFile = value => (
  (typeof File !== 'undefined' && value instanceof File) ||
  (typeof Blob !== 'undefined' && value instanceof Blob)
);

const isUpload = ({ variables }) =>
  Object.values(variables).some(isFile);

const isSubscriptionOperation = ({ query }) => {
  const { kind, operation } = getMainDefinition(query);
  return kind === 'OperationDefinition' && operation === 'subscription';
};

const requestLink = split(isSubscriptionOperation, wsLink, httpLink);

export const terminalLink = split(isUpload, uploadLink, requestLink);