Как загрузить изображение в конечную точку Graphstone Keystone JS?

Question

Я использую TinyMCE в настраиваемом поле для Keystone JS AdminUI, который является приложением React. Я хотел бы загрузить изображения с фронта React на Keystone JS GraphQL обратно. Я могу загрузить изображения, используя конечную точку REST, которую я добавил на сервер Keystone - передавая TinyMCE обратный вызов images_upload_handler, - но я бы хотел воспользоваться уже созданной Keystone конечной точкой GraphQL для списка / типа изображений, которые у меня есть. создано.

Сначала я попытался использовать подход, описанный в этой статье , используя axios для загрузки изображения

const getGQL = (theFile) => {
    const query = gql`
  mutation upload($file: Upload!) {
    createImage(file: $file) {
      id
      file {
        path
        filename
      }
    }
  }
`;
// The operation contains the mutation itself as "query"
    // and the variables that are associated with the arguments
    // The file variable is null because we can only pass text
    // in operation variables
    const operation = {
        query,
        variables: {
            file: null
        }
    };
    // This map is used to associate the file saved in the body
    // of the request under "0" with the operation variable "variables.file"
    const map = {
        '0': ['variables.file']
    };

    // This is the body of the request
    // the FormData constructor builds a multipart/form-data request body
    // Here we add the operation, map, and file to upload
    const body = new FormData();
    body.append('operations', JSON.stringify(operation));
    body.append('map', JSON.stringify(map));
    body.append('0', theFile);

    // Create the options of our POST request
    const opts = {
        method: 'post',
        url: 'http://localhost:4545/admin/api',
        body
    };
// @ts-ignore
    return axios(opts);

};

но я не уверен, что передать как theFile - TinyMCE images_upload_handler, из которого мне нужно вызвать загрузку изображения, принимает объект blobInfo, который содержит функции, чтобы дать мне

Имя файла не работает, как и BLOB-объект - оба дают мне 500 ошибок сервера - сообщение об ошибке не уточняется c.

Я бы предпочел использовать клиент GraphQL для загрузки изображения - другая статья SO предлагает использовать apollo-upload-client . Однако я работаю в среде Keystone JS, и Apollo-upload-client говорит, что

Клиент Apollo может иметь только 1 «завершающую» Apollo Link, которая отправляет запросы GraphQL; если такой, как apollo-link-http, уже настроен, удалите его.

Я считаю, что Keystone уже настроил Apollo-link-http (при поиске он появляется несколько раз), поэтому не буду Я думаю, что смогу использовать Apollo-upload-client.

Я очень озадачен и был бы признателен за любую помощь, которую вы можете оказать!

Answer 1

UploadLink - это просто замена для HttpLink. Нет причин, по которым вы не сможете его использовать. Здесь есть демо Keystone JS приложение здесь , которое показывает конфигурацию клиента Apollo, включая использование createUploadLink.

Фактическое использование мутации со скаляром Upload показано здесь .

Глядя на исходный код , вы сможете использовать собственный обработчик изображения и вызывать blob на предоставленном blobInfo объект. Как то так:

tinymce.init({
  images_upload_handler: async function (blobInfo, success, failure) {
    const image = blobInfo.blob()
    try {
      await apolloClient.mutate(
        gql` mutation($image: Upload!) { ... } `,
        {
          variables: { image }
        } 
      )
      success()
    } catch (e) {
      failure(e)
    }
  }
})