Question

我正在尝试通过将Apollo客户端与createUploadLink（）一起使用，将我的React Native应用程序中的图像上传到graphql。当我试图通过传递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,
});

文件上传功能，我正在使用react-native-image-crop-picker进行多幅图像选择

  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);
      });
  };

有人可以帮我吗？

Answer 1

我的apollo客户端是使用apollo-boost配置的，而我正在使用chrome调试器拦截网络，这导致了我这个问题。

更具体地说，我正在使用以下代码在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;
}

如果我们使用Chrome调试器，则

apollo-upload-client不会以多部分数据形式发送数据。我们将面临网络问题。issue就是答案。或我没有删除apollo-boost，而我的应用程序的一部分正在使用它，这也是一个问题。

React Native：无法在'FormData'上执行'append'：参数2不是'Blob'类型。在新的ApolloError

1 个答案: