已找到解决方案。

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进行了比较。我注意到我的依赖已经过时了。所以我升级了它们，一切正常！这就是我必须要做的事情。更新我的依赖项。

故事的道德

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

Answer 2

在代码中爬行，我找到了this存储库，如果我没弄错的话，它必须是前端代码？

正如您所提到的， apollo-upload-server 需要一些额外的设置，同样适用于项目的前端部分。您可以找到有关它的更多信息here。

据我所知，代码中有问题的部分必须是Apollo客户端的初始化。根据我的观察，您已将Apollo所需的所有内容放在src/index文件夹中，但未包含Apollo Upload Client本身。

我已经从我的一个项目中创建了一个要点，该项目初始化了Apollo Upload Client以及其他一些东西，但我认为你会发现自己已经离开了。

https://gist.github.com/maticzav/86892448682f40e0bc9fc4d4a3acd93a

希望这对你有所帮助！

使用React Native

更新

2 个答案:

已找到解决方案。

故事的道德