使用React Native中的apollo-upload-client上传图像

Question

我现在正在尝试Prisma和React Native.目前我正在尝试使用包_apollo-upload-client(https://github.com/jaydenseric/apollo-upload-client)将图像上传到我的数据库.但它并不是那么顺利.

目前我可以选择ImagePicker来自世博会的图像.然后我试图用Apollo客户端进行变异:

await this.props.mutate({
  variables: {
    name,
    description,
    price,
    image,
  },
});

但是我收到以下错误:

Network error: JSON Parse error: Unexpected identifier "POST"
- node_modules/apollo-client/bundle.umd.js:76:32 in ApolloError
- node_modules/apollo-client/bundle.umd.js:797:43 in error

我相信它来自以下代码:

const image = new ReactNativeFile({
  uri: imageUrl,
  type: 'image/png',
  name: 'i-am-a-name',
});

这与他们的示例几乎完全相同,https://github.com/jaydenseric/apollo-upload-client#react-native.

imageUrl来自我的州.当我在console.log时,image我得到以下内容:

ReactNativeFile {
  "name": "i-am-a-name",
  "type": "image/png",
  "uri": "file:///Users/martinnord/Library/Developer/CoreSimulator/Devices/4C297288-A876-4159-9CD7-41D75303D07F/data/Containers/Data/Application/8E899238-DE52-47BF-99E2-583717740E40/Library/Caches/ExponentExperienceData/%2540anonymous%252Fecommerce-app-e5eacce4-b22c-4ab9-9151-55cd82ba58bf/ImagePicker/771798A4-84F1-4130-AB37-9F382546AE47.png",
}

所以有些东西突然冒出来了.但我无法进一步,我希望我能得到一些人的提示.

我也没有包含后端的任何代码,因为我认为这个问题存在于前端.但如果有人想看看后端我可以更新问题,或者你可以看看这里:https://github.com/Martinnord/Ecommerce-server/tree/image_uploads.

非常感谢阅读!干杯.

更新

有人问服务器中的逻辑之后我决定将其过去:

Product.ts

// import shortid from 'shortid'
import { createWriteStream } from 'fs'

import { getUserId, Context } from '../../utils'

const storeUpload = async ({ stream, filename }): Promise<any> => {
    // const path = `images/${shortid.generate()}`
    const path = `images/test`

    return new Promise((resolve, reject) =>
      stream
        .pipe(createWriteStream(path))
        .on('finish', () => resolve({ path }))
        .on('error', reject),
    )
  }

const processUpload = async upload => {
    const { stream, filename, mimetype, encoding } = await upload
    const { path } = await storeUpload({ stream, filename })
    return path
}

export const product = {
  async createProduct(parent, { name, description, price, image }, ctx: Context, info) {
    // const userId = getUserId(ctx)
    const userId = 1;
    console.log(image);
    const imageUrl = await processUpload(image);
    console.log(imageUrl);
    return ctx.db.mutation.createProduct(
      {
        data: {
            name,
            description,
            price,
            imageUrl,
            seller: {
                connect: { id: userId },
            },
        },
      },
      info
    )
  },
}

Answer 1

已找到解决方案.

我有点尴尬,这是我遇到的问题,我不知道我是否应该接受这个答案,因为我在解决问题时感到尴尬.但....

我的代码没有任何问题,但是依赖版本存在问题.我试图回溯我的应用程序上的所有内容,因此我决定从头开始创建一个新帐户.我希望它能正常工作,但我收到了这个错误:

Error: Cannot use GraphQLNonNull "User!" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

然后我明白某些事情(我没想到)是错误的.我检查了我的依赖项版本,并将它们与Graphcool的示例进行了比较,https://github.com/graphcool/graphql-server-example/blob/master/package.json.我注意到我的依赖已经过时了.所以我升级了它们,一切正常!这就是我必须要做的事情.更新我的依赖项.

故事的道德启示

总是,总是检查你该死的依赖版本......