graphql - 如何在 react-admin graphql 中上传图片
问题描述
我在 react-admin 文档中看到了处理图像上传并将其转换为 Base64 的示例 dataprovider,但我不能将它用于 graphql dataprovider 任何人都可以帮助我吗?实际上我想要一段在 react-admin graphql dataprovider 中处理图像上传的代码
解决方案
您必须创建另一个客户端来将图像(或文件)转换为 base64 并将您的 graphQL 客户端包装在它周围。像这个:
上传.js
import { CREATE, UPDATE } from 'react-admin'
/**
* Convert a `File` object returned by the upload input into a base 64 string.
* That's not the most optimized way to store images in production, but it's
* enough to illustrate the idea of data provider decoration.
*/
const convertFileToBase64 = file =>
new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file.rawFile)
reader.onload = () => resolve(reader.result)
reader.onerror = reject
})
export default dataProvider => (fetchType, resource, params) => {
if (resource === 'Photo' && (fetchType === CREATE || fetchType === UPDATE)) {
const { data, ...rest_params } = params
return convertFileToBase64(data.data).then(base64 => {
return dataProvider(fetchType, resource, {
...rest_params,
data: { ...data, data: base64 }
})
})
}
return dataProvider(fetchType, resource, params)
}
数据.js
import buildGraphQLProvider, { buildQuery } from 'ra-data-graphql-simple'
import { createHttpLink } from 'apollo-link-http'
import { ApolloLink } from 'apollo-link'
import { onError } from 'apollo-link-error'
import { AUTH_KEY } from '../authentication'
import { data } from '../schema'
const customBuildQuery = introspection => (fetchType, resource, params) => {
return buildQuery(introspection)(fetchType, resource, params)
}
const httpLink = createHttpLink({ uri: process.env.REACT_APP_GRAPHQL_URI })
const middlewareLink = new ApolloLink((operation, forward) => {
operation.setContext({
headers: {
Authorization: `Bearer ${localStorage.getItem(AUTH_KEY)}` || null
}
})
return forward(operation)
})
const errorLink = onError(({ networkError }) => {
if (networkError.statusCode === 401) {
// logout();
}
})
const link = middlewareLink.concat(httpLink, errorLink)
export default () =>
buildGraphQLProvider({
clientOptions: {
link: link
},
introspection: { schema: data.__schema },
buildQuery: customBuildQuery
})
应用程序.js
import React, { Component } from 'react'
import { Admin, Resource } from 'react-admin'
import buildGraphQLProvider from 'data'
import addUploadCapabilities from 'upload'
import dashboard from 'dashboard'
import User from 'resources/User'
import Event from 'resources/Event'
import Photo from 'resources/Photo'
class App extends Component {
state = { dataProvider: null }
componentDidMount () {
buildGraphQLProvider().then(dataProvider => this.setState({ dataProvider }))
}
render () {
const { dataProvider } = this.state
if (!dataProvider) {
return (
<div className='loader-container'>
<div className='loader'>Loading...</div>
</div>
)
}
return (
<Admin
dashboard={dashboard}
title='Admin'
dataProvider={addUploadCapabilities(dataProvider)}
>
<Resource name='User' {...User} />
<Resource name='Event' {...Event} />
<Resource name='Photo' {...Photo} />
</Admin>
)
}
}
export default App
推荐阅读
- java - 无法使用 mockito 存根依赖项
- javascript - javascript中的字符串是如何变成不可变的?
- firebase - Flutter Futurebuilder 数据排序仅在热重载后更新
- windows - 无法获取任务列表批处理文件以输出子字符串
- python - 在 Windows 上的 .cmd 文件中启动 Python VEnv
- python-3.x - 使用 value_counts() 创建数据帧
- java - 是对象[] $1d = { 新对象[0]; } 考虑一个二维数组?
- html - 如何在 HTML 和 CSS 中制作一个在保持居中的同时自动缩小的对话框?
- git - 将项目/模块直接添加到 .gitmodules
- flutter - Flutter 从另一个 Wideget 更新小部件中的列表视图