Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'apollo-link-http-common' 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.
if (body.variables) {
let serializedVariables;
try {
serializedVariables = serializeFetchParameter(
body.variables,
'Variables map',
);
} catch (parseError) {
return { parseError };
}
addQueryParam('variables', serializedVariables);
}
if (body.extensions) {
let serializedExtensions;
try {
serializedExtensions = serializeFetchParameter(
body.extensions,
'Extensions map',
);
} catch (parseError) {
return { parseError };
}
addQueryParam('extensions', serializedExtensions);
}
// Reconstruct the URI with added query params.
// XXX This assumes that the URI is well-formed and that it doesn't
// already contain any of these query params. We could instead use the
// URL API and take a polyfill (whatwg-url@6) for older browsers that
// don't support URLSearchParams. Note that some browsers (and
// versions of whatwg-url) support URL but not URLSearchParams!
let fragment = '',
// the extra level of JSON serialization!
const queryParams = [];
const addQueryParam = (key: string, value: string) => {
queryParams.push(`${key}=${encodeURIComponent(value)}`);
};
if ('query' in body) {
addQueryParam('query', body.query);
}
if (body.operationName) {
addQueryParam('operationName', body.operationName);
}
if (body.variables) {
let serializedVariables;
try {
serializedVariables = serializeFetchParameter(
body.variables,
'Variables map',
);
} catch (parseError) {
return { parseError };
}
addQueryParam('variables', serializedVariables);
}
if (body.extensions) {
let serializedExtensions;
try {
serializedExtensions = serializeFetchParameter(
body.extensions,
'Extensions map',
);
} catch (parseError) {
contextConfig,
),
);
const loadedBody = optsAndBody.map(({ body }) => body);
const options = optsAndBody[0].options;
// There's no spec for using GET with batches.
if (options.method === 'GET') {
return fromError(
new Error('apollo-link-batch-http does not support GET requests'),
);
}
try {
(options as any).body = serializeFetchParameter(loadedBody, 'Payload');
} catch (parseError) {
return fromError(parseError);
}
let controller;
if (!(options as any).signal) {
const { controller: _controller, signal } = createSignalIfSupported();
controller = _controller;
if (controller) (options as any).signal = signal;
}
return new Observable(observer => {
fetcher(chosenURI, options)
.then(response => {
// Make the raw response available in the context.
operations.forEach(operation => operation.setContext({ response }));
// 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 => {
map[++i] = paths
if (
useGETForQueries &&
!operation.query.definitions.some(definitionIsMutation)
) {
options.method = 'GET';
}
if (options.method === 'GET') {
const { newURI, parseError } = rewriteURIForGET(chosenURI, body);
if (parseError) {
return fromError(parseError);
}
chosenURI = newURI;
} else {
try {
(options as any).body = serializeFetchParameter(body, 'Payload');
} catch (parseError) {
return fromError(parseError);
}
}
return new Observable(observer => {
fetcher(chosenURI, options)
.then(response => {
operation.setContext({ response });
return response;
})
.then(parseAndCheckHttpResponse(operation))
.then(result => {
// we have data and can send it to back up the link chain
observer.next(result);
observer.complete();
return new Observable(observer => {
fetch(uri, options)
.then(response => {
operation.setContext({ response })
return response
})
.then(parseAndCheckHttpResponse(operation))
.then(result => {
// we have data and can send it to back up the link chain
observer.next(result)
observer.complete()
return result
})
.catch(err => {
if (err.result && err.result.errors && err.result.data) {
observer.next(err.result)
}
observer.error(err)
})
})
} else {
return new Observable(observer => {
fetcher(chosenURI, options)
.then(response => {
// Make the raw response available in the context.
operations.forEach(operation => operation.setContext({ response }));
return response;
})
.then(parseAndCheckHttpResponse(operations))
.then(result => {
// we have data and can send it to back up the link chain
observer.next(result);
observer.complete();
return result;
})
.catch(err => {
// fetch was cancelled so its already been cleaned up in the unsubscribe
if (err.name === 'AbortError') return;
// if it is a network error, BUT there is graphql result info
// fire the next observer before calling error
// this gives apollo-client (and react-apollo) the `graphqlErrors` and `networErrors`
// to pass to UI
// this should only happen if we *also* have data as part of the response key per
// the spec
if (err.result && err.result.errors && err.result.data) {
return new Observable(observer => {
fetcher(chosenURI, options)
.then(response => {
operation.setContext({ response });
return response;
})
.then(parseAndCheckHttpResponse(operation))
.then(result => {
// we have data and can send it to back up the link chain
observer.next(result);
observer.complete();
return result;
})
.catch(err => {
// fetch was cancelled so it's already been cleaned up in the unsubscribe
if (err.name === 'AbortError') return;
// if it is a network error, BUT there is graphql result info
// fire the next observer before calling error
// this gives apollo-client (and react-apollo) the `graphqlErrors` and `networErrors`
// to pass to UI
// this should only happen if we *also* have data as part of the response key per
// the spec
if (err.result && err.result.errors && err.result.data) {
return new Observable(observer => {
// Allow aborting fetch, if supported.
const { controller, signal } = createSignalIfSupported()
if (controller) options.signal = signal
linkFetch(uri, options)
.then(response => {
// Forward the response on the context.
operation.setContext({ response })
return response
})
.then(parseAndCheckHttpResponse(operation))
.then(result => {
observer.next(result)
observer.complete()
})
.catch(error => {
if (error.name === 'AbortError')
// Fetch was aborted.
return
if (error.result && error.result.errors && error.result.data)
// There is a GraphQL result to forward.
observer.next(error.result)
observer.error(error)
})
return new ApolloLink(operation => {
const uri = selectURI(operation, fetchUri)
const context = operation.getContext()
// Apollo Engine client awareness:
// https://apollographql.com/docs/platform/client-awareness
const {
// From Apollo Client config.
clientAwareness: { name, version } = {},
headers
} = context
const contextConfig = {
http: context.http,
options: context.fetchOptions,
credentials: context.credentials,
headers: {