6

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

ImagePicker目前我可以从 Expo中选择一张图片。然后我试图用 Apollo Client 做我的突变：

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.logimage我得到以下信息：

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 。

非常感谢阅读！干杯。

更新

在有人询问服务器中的逻辑后，我决定在下面通过它：

产品.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
    )
  },
}
4

2 回答 2

7

已找到解决方案。

我有点尴尬，这是我面临的问题，我什至不知道我是否应该接受这个答案，因为我在解决问题时感到尴尬。但....

我的代码没有问题，但是依赖版本有问题。我试图回溯我的应用程序上的所有内容，所以我决定从头开始创建一个新帐户。我希望它可以正常工作，但我收到了这个错误：

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

故事的道德启示

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

于 2018-03-05T10:41:43.803 回答
3

翻翻你的代码，我找到了这个仓库，如果我没记错的话，应该是前端代码吧？

正如您所提到的，apollo-upload-server需要一些额外的设置，项目的前端部分也是如此。你可以在这里找到更多关于它的信息。

据我所知，您的代码有问题的部分一定是 Apollo 客户端的初始化。根据我的观察，您已经将 Apollo 所需的所有内容都放在了src/index文件夹中，但没有包含Apollo Upload Client它自己。

我从我的一个项目中创建了一个要点，该项目将 Apollo Upload Client 与其他一些东西一起初始化，但我想你会发现自己。

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

希望这对你有帮助！

于 2018-03-04T13:23:08.107 回答