react-native - 使用 apollo 客户端 react native android 上传图像时获取网络请求失败

Question

我正在使用 ApolloClient 发送包含文件(图像)的突变，但我收到了

Error: Network request failed

这是我创建链接所做的

import { createUploadLink } from 'apollo-upload-client' v ==>> "^15.0.0";

const uploadLink = createUploadLink({
        uri: API_URL,
        headers: {
          "Authorization": `Bearer ${token}`,
          'Content-Type': 'multipart/form-data',
          "Accept":"application/json"
        },
      });

这个用来处理错误

import { onError } from "@apollo/client/link/error"; v ==>> "^3.3.20"

   const errorLink = onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors)
          graphQLErrors.forEach(({ message, locations, path }) =>
            console.log(
              `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
            ),
          );
      
        if (networkError) console.log(`[Network zaid error]: ${networkError}`);
      });

然后:

const client = new ApolloClient({
        cache: new InMemoryCache(),
        link: from([errorLink,uploadLink]),
        defaultOptions: {
          watchQuery: {
            fetchPolicy: 'cache-and-network',
            errorPolicy: 'none'
          },
          mutate: {
            mutation: "DocumentNode",
            errorPolicy: 'none'
          },
        },
      });

然后我调用了突变:

       await client.mutate({

        mutation:
        gql`  
         mutation($data: PostCreatInput!, $files: [CustomCreateImages!]!) {
           createpost(data: $data, files: $files) {
              id
          }}`,

        variables: {

          data: {****},

          files:[{file:ReactNativeFile}]

         }
      
      
      }).then(response => {
        console.log(response);
        return response
      }).catch(response => {
        console.log(response);
        return response
      })

我使用了 apollo-upload-client 生成的 ReactNativeFile

          new ReactNativeFile({
            uri:  "file:///storage/***.jpg",
            name: "a.jpg",
            type: "image/jpeg"
          });

我正在使用 native react "react-native": "0.62.2"我有一个不使用 localhost 的实时服务器我确实检查了服务器日志，这个请求从未离开过手机；服务器上没有它的记录。

一整天都被困在上面，非常感谢任何帮助!

Answer 1

React Native 0.62+ 的错误会扰乱多形式请求的配置。可以通过注释掉 android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java 中的第 43 行来修复:

//builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));