React Native: не удалось выполнить «добавление» для «FormData»: параметр 2 не относится к типу «Blob». на новом ApolloError - PullRequest
Новая
       22

React Native: не удалось выполнить «добавление» для «FormData»: параметр 2 не относится к типу «Blob». на новом ApolloError

0 голосов
/ 11 апреля 2020

Я пытаюсь загрузить изображение из моего собственного собственного приложения в graphql с помощью клиента Apollo с createUploadLink (). Когда я пытаюсь изменить данные, передав ReactNativeFile как переменную, он говорит: 

"network request failed: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'. at new ApolloError ".

Это мутация, которую я пытаюсь использовать 

  mutation publishPost(
    $content: String!
    $LocationInput: LocationInput!
    $InputPostAttachment: [InputPostAttachment!]
  ) {
  publishPost(
    content: $content
    location: $LocationInput
    attachments: $InputPostAttachment
  ) { 
      content
     }
  }

InputPostAttachment имеет тип 

type InputPostAttachment {
   type: PostAttachmentType!
   file: Upload!
}

Настройки клиента Apollo, и я использую apollo-upload-client 

const httpLink = createUploadLink({
  uri: 'http://localhost:8000/graphql',
});

const authLink = setContext(async (headers: any) => {
  const token = await getToken();
  return {
    ...headers,
    headers: {
      authorization: token ? `Bearer ${token}` : null,
    },
  };
});

const link = authLink.concat(httpLink);

// create an inmemory cache instance for caching graphql data
const cache = new InMemoryCache();

// instantiate apollo client with apollo link instance and cache instance
export const client = new ApolloClient({
  link,
  cache,
});

Функция загрузки файлов, и я использую реагирующее-родное-изображение-кадрирование для выбора нескольких изображений 

  const [image, setimage] = useState([]);

  const _pickImage = () => {
    ImagePicker.openPicker({
      includeBase64: true,
      multiple: true,
    }).then((images: any) => {
      let imageData: any = [];
      images.map((data: any) => {
        const file = new ReactNativeFile({
          uri: data.path,
          name: data.filename,
          type: data.mime,
        });
        imageData.push({
          type: 'IMAGE',
          file: file,
        });
      });
      setimage(imageData);
      console.log(images);
    });
  };

  const handlePost = async () => {

    const InputPostAttachment: any = [...image];

    const LocationInput = {
      place: place,
      vicinity: vicinity,
      province: province,
    };

    publishPost({variables: {content, LocationInput, InputPostAttachment}})
      .then(({data}) => {
        console.log(data);
        props.navigation.navigate('Home');
      })
      .catch((err) => {
        console.log('err happened');
        console.log(err);
      });
  };

Может кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 11 апреля 2020

Мой apollo-клиент был настроен с использованием apollo-boost, и я использовал chrome отладчик для перехвата сети, что вызывало у меня эту проблему.

Чтобы быть более точным c Я использовал следующий код чтобы получить сетевые запросы, отправленные моим приложением в chrome отладчик 

global.XMLHttpRequest =
  global.originalXMLHttpRequest || global.XMLHttpRequest;
global.FormData = global.originalFormData || global.FormData;

if (window.FETCH_SUPPORT) {
  window.FETCH_SUPPORT.blob = false;
} else {
  global.Blob = global.originalBlob || global.Blob;
  global.FileReader = global.originalFileReader || global.FileReader;
}

apollo-upload-client, не будет отправлять данные в виде составных данных, если мы используем отладчик chrome. Мы столкнемся с проблемой сети. На этот вопрос есть ответ. или я не удалил apollo-boost, и какая-то часть моего приложения использовала его, что также было проблемой.

...