React Native. Upload file apollo client

Question

I ask for the help of specialists, I am new to React Native and faced such a problem. enter image description here Trying to send the file this way with a single button click using react-native-image-crop-picker I already sent files to the server on Next js and everything worked fine, but now I needed to make a mobile version but it doesn't work as I expected.

import { useMutation } from '@apollo/client';
import React, { useCallback, useEffect, useState } from 'react';
import {
  Image,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from "react-native-image-crop-picker"
import { ReactNativeFile } from 'apollo-upload-client';
import { gql } from "@apollo/client";

export const mutationSendPhotoForProcessing = gql`
mutation SendPhotoForProcessing($file: Upload!){
  send_photo_for_processing(file: $file)
}
`
const Home = () => {
  const [SendPhoto] = useMutation(mutationSendPhotoForProcessing);

  const onButtonPress = async () => {
    let file = await ImagePicker.openPicker({
      cropping: true
    });

    const { data } = await SendPhoto({
      variables: {
        file: new ReactNativeFile({
          name: 'a.jpg',
          type: 'image/jpg',
          uri: file.path,
        }),
      }
    });
  };

  return (
    <SafeAreaView>
      <StatusBar barStyle={'dark-content'} />
      <ScrollView>
        <View>
          <Button
            onPress={() => alert()}
            icon={
              <Icon name="upload" color={"white"} size={20} />
            }
          />
          <Button
            onPress={() => onButtonPress()}
            title="Upload image"
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
});

export default Home;

score 0 · Answer 1 · answered Aug 04 '22 at 08:58

I have seen your code, I know it's too late to answer now but let's help others. your code is all good but there is one more thing to upload the file using apollo client you need to configure apollo-upload-client in your app first before using it in the app components/screens.

const uri = "you graphql api"
const client = new ApolloClient({
    uri: uri,
    cache: new InMemoryCache(),
    link: createUploadLink({
        uri: uri,
        credentials: "same-origin"
    }),
});

with the above code we are configuring 'apollo-upload-client' to upload the files without any error. Don't forget to add import { createUploadLink } from 'apollo-upload-client'; before using createUploadLink.

React Native. Upload file apollo client

1 Answers1