React native not sending real file data to server (Meteor + Apollo).

the client side mutation

const UPLOAD_IMAGE = gql`
  mutation uploadImage($file: Upload!) {
    uploadImage(file: $file)
  }
`;

const file = new ReactNativeFile({
  uri, // From camera roll
  name: 'testing',
  type: 'image/jpeg',
});

uploadAvatar({
  variables: {
    file,
  },
});

the client side setup

...
const httpLink = createUploadLink({ uri: api });
const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient({
  link: ApolloLink.from([middleWareLink, errorLink, stateLink, authLink, link]),
  cache,
});

the server side setup (meteor)

import { mergeTypes, mergeResolvers } from 'merge-graphql-schemas';

// Resolvers
import { accountTypeDefs, accountResolvers } from './account';
import { categoriesResolvers } from './categories';
...

// TypeDefs
import types from './schema.graphql';
// I have declared "scalar Upload" in schema.graphql already

const resolvers = mergeResolvers([
  ...accountResolvers,
  ...categoriesResolvers,
  ...
  {
    Upload: GraphQLUpload
  },
]);

const typeDefs = mergeTypes([...accountTypeDefs, types]);

const schema = makeExecutableSchema({ typeDefs, resolvers });

createApolloServer(
  {
    schema,
  },
  {
    graphiql: true,
    configServer: (expressServer) => {
      expressServer.use(bodyParser.json({ limit: '5mb' }));
      expressServer.use(graphqlUploadExpress());
    },
  },
);

The server receives an object instead of a Promise for further processing.

{
  uri, // From camera roll
  name: 'testing',
  type: 'image/jpeg',
}

I’ve read a lot of the related issues but not sure which parts are incorrect. thanks!!

[lauyilouis]

Hi @mike-marcacci @jaydenseric, you are right. It was the client side problem. There was a middleware link parsed the ReactNativeFile type to String. It was resolved after removing that link. Thank you very much!

[lauyilouis]

Hi @mike-marcacci @jaydenseric, you are right. It was the client side problem. There was a middleware link parsed the ReactNativeFile type to String. It was resolved after removing that link. Thank you very much!

Hi i am facing the same issue. I wonder which link that causes this problem .

Thanks xx

There was an Apollo link at Apollo Client acted as a middleware to ignore the typename for any mutation. It prevent the __typename is injected in the variable of any mutation but also stringify the of ReactNativeFile type so I removed it.

const middleWareLink = new ApolloLink((operation, forward) => {
  console.log('before', operation);
  if (operation.variables) {
    const omitTypename = (key, value) => (key === '__typename' ? undefined : value);
    // eslint-disable-next-line no-param-reassign
    operation.variables = JSON.parse(JSON.stringify(operation.variables), omitTypename);
  }
  console.log('after', operation);
  return forward(operation);
});