Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'extract-files' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
fetchFromRemoteEndpoint({ request, options }) {
// Continue if uploads are possible
if (typeof FormData !== 'undefined') {
// Extract any files from the request variables
const files = extractFiles(request.variables, 'variables')
// Continue if there are files to upload
if (files.length) {
// Convert query AST to string for transport
request.query = printAST(request.query)
// Construct a multipart form
const formData = new FormData()
formData.append('operations', JSON.stringify(request))
files.forEach(({ path, file }) => formData.append(path, file))
// Send request
return fetch(this._uri, {
method: 'POST',
body: formData,
...options
function getFetchOptions(operation) {
const fetchOptions = {
method: 'POST',
headers: {
...opts.headers,
},
...opts.fetchOptions,
}
const { clone, files } = extractFiles(operation)
const operationJSON = JSON.stringify(clone)
if (files.size) {
// See the GraphQL multipart request spec:
// https://github.com/jaydenseric/graphql-multipart-request-spec
const form = new FormData()
form.append('operations', operationJSON)
const map = {}
let i = 0
files.forEach(paths => {
map[++i] = paths
})
form.append('map', JSON.stringify(map))
headers: {
// Client awareness headers are context overridable.
...(name && { 'apollographql-client-name': name }),
...(version && { 'apollographql-client-version': version }),
...headers
}
}
const { options, body } = selectHttpOptionsAndBody(
operation,
fallbackHttpConfig,
linkConfig,
contextConfig
)
const { clone, files } = extractFiles(body)
const payload = serializeFetchParameter(clone, 'Payload')
if (files.size) {
// Automatically set by fetch when the body is a FormData instance.
delete options.headers['content-type']
// GraphQL multipart request spec:
// https://github.com/jaydenseric/graphql-multipart-request-spec
const form = new FormData()
form.append('operations', payload)
const map = {}
let i = 0
files.forEach(paths => {
getFetchOptions(operation, fetchOptionsOverrides = {}) {
const fetchOptions = {
method: 'POST',
headers: {
...this.headers
},
...this.fetchOptions,
...fetchOptionsOverrides
}
if (fetchOptions.method === 'GET') {
return fetchOptions
}
const { clone, files } = extractFiles(
operation,
'',
isExtractableFileEnhanced
)
const operationJSON = JSON.stringify(clone)
if (files.size) {
// See the GraphQL multipart request spec:
// https://github.com/jaydenseric/graphql-multipart-request-spec
if (!this.FormData) {
throw new Error(
'GraphQLClient: FormData must be polyfilled or passed in new GraphQLClient({ FormData })'
)
}
fetchFromRemoteEndpoint({ request, options }) {
// Continue if uploads are possible
if (typeof FormData !== 'undefined') {
// Extract any files from the request variables
const files = extractFiles(request.variables, 'variables')
// Continue if there are files to upload
if (files.length) {
// Convert query AST to string for transport
request.query = printAST(request.query)
// Construct a multipart form
const formData = new FormData()
// formData.append('operations', JSON.stringify(request))
formData.append('query', request.query)
formData.append('operationName', request.operationName)
files.forEach(({ path, file }) => {
formData.append(path, file)
request.variables[path.replace("variables.", "")] = path
})
formData.append('variables', JSON.stringify(request.variables))
export function uploadMiddleware(query: IQuery, request: RequestInit, next: () => void) {
if (!query || !query.variables || !request.headers) return next();
const { clone, files } = extractFiles({variables: query.variables});
if (files.size === 0) return next();
delete request.headers['content-type'];
// GraphQL multipart request spec:
// https://github.com/jaydenseric/graphql-multipart-request-spec
const form = new FormData();
form.append('operations', BSON.stringify({query: (isGQL(query.query)) ? query.query.loc.source.body : query.query, variables: clone.variables}));
const map = {};
let i = 0;
files.forEach((paths: string) => {
map[++i] = paths;
});
form.append('map', JSON.stringify(map));
(files, request, index) =>
files.concat(extractFiles(request.variables, `${index}.variables`)),
[]
({ variables }) => extractFiles(cloneDeep(variables)).length > 0,
createUploadLink({ uri, credentials: 'include' }),