Загружайте изображения с помощью apollo-upload-client в React Native

Я сейчас пробую 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.

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
    )
  },
}
Источник

2 ответа

Решение

Решение найдено.

Я немного смущен, что это была проблема, с которой я столкнулся, и я не знаю, должен ли я даже принять этот ответ из-за неловкости, которую я чувствовал, когда я установил проблему. Но....

В моем коде не было ничего плохого, но была проблема с версиями зависимостей. Я попытался отследить все в своем приложении, поэтому я решил начать с самого начала и создать новую учетную запись. Я ожидал, что это будет работать нормально, но я получил эту ошибку:

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. И я заметил, что мои зависимости устарели. Я обновил их, и все заработало! Вот что я должен был сделать. Обновите мои зависимости.

Мораль истории

Всегда, всегда проверяйте свои проклятые версии зависимостей...

Источник

Просматривая ваш код, я нашел этот репозиторий, который должен быть внешним кодом, если я не ошибаюсь?

Как вы упомянули, apollo-upload-server требует некоторой дополнительной настройки, и то же самое касается внешней части вашего проекта. Вы можете найти больше об этом здесь.

Насколько я знаю, проблемной частью вашего кода должна быть инициализация клиента Apollo. По моим наблюдениям, вы положили все, что требуется Аполлону внутри src/index папка, но не включена Apollo Upload Client сам.

Я создал суть одного из моих проектов, который инициализирует Apollo Upload Client наряду с некоторыми другими вещами, но я думаю, что вы поймете себя.

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

Надеюсь, это поможет вам!

Источник
Другие вопросы по тегам