1635087600
Optics is something we're quite pleased of, and we hope you'll check it out! In only a few minutes, you can integrate Optics to your GraphQL app. To get started, go here, or if you have any questions, join us in optics on Apollo Slack.
1623292675
As we move into a GraphQL-first world, it’s important to be able to understand not only what data you’re fetching, but also how it’s being fetched. Many people think of this as an after-thought, hoping that simply getting as much code as possible out as fast as possible will help them win over their competition.
However, this approach can be costly on many levels. First, your application’s end users will notice the clunkiness of your application. In addition, on your servers, fetching data the wrong way can create inefficiencies that cost you in CPU usage, memory leaks, and slow response times (not to mention your AWS bill skyrocketing through the roof). Not the type of growth you’re looking for, probably.
#graphql #graphql server #apollo optics
1635087600
Optics is something we're quite pleased of, and we hope you'll check it out! In only a few minutes, you can integrate Optics to your GraphQL app. To get started, go here, or if you have any questions, join us in optics on Apollo Slack.
1646845740
Learn how to build a full-stack web app with Angular Apollo & GraphQL using Nest.js as a backend. Automatic code generation makes creating this app a breeze.
UI Repo: https://github.com/mguay22/booker
Backend Repo: https://github.com/mguay22/booker-backend
1600219097
GraphQL is a query language and a server-side runtime that is used to request data from the server. The first thing that comes to mind when hearing the term “query language” is SQL. Just as SQL is used for querying databases, GraphQL is a bit like SQL but for querying web APIs as it eliminates the need to repeatedly develop or change existing end-points. GraphQL also enables the client/front-end to retrieve exactly the data they have requested and no more. This means that, within a single request of GraphQL, you can traverse from the entry point to the related data (whereas in RESTful API you have to call multiple endpoints to fetch similar results).
The following example will help you to understand this better. Let us consider an object person which has the attributes name, age, email, and contactNumber. Suppose the front-end only needs the name and age of the person. If we design a REST API, the endpoint will look like api/persons, which will end up fetching all the fields for the person object. The issue arises here because there is no easy way to communicate that I am interested in some fields and not others (which causes REST API to over fetch the data).
#graphql #nodejs #apollo-server #graphql-apollo-server
1639797442
A terminating Apollo Link for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList
, File
, Blob
, or ReactNativeFile
instances), or else fetches a regular GraphQL POST or GET request (depending on the config and GraphQL operation).
To install with npm, run:
npm install apollo-upload-client
Remove any uri
, credentials
, or headers
options from the ApolloClient
constructor.
Apollo Client can only have 1 terminating Apollo Link that sends the GraphQL requests; if one such as HttpLink
is already setup, remove it.
Initialize the client with a terminating Apollo Link using createUploadLink
.
Also ensure the GraphQL server implements the GraphQL multipart request spec and that uploads are handled correctly in resolvers.
Use FileList
, File
, Blob
or ReactNativeFile
instances anywhere within query or mutation variables to send a GraphQL multipart request.
See also the example API and client.
FileList
import { gql, useMutation } from "@apollo/client";
const MUTATION = gql`
mutation ($files: [Upload!]!) {
uploadFiles(files: $files) {
success
}
}
`;
function UploadFiles() {
const [mutate] = useMutation(MUTATION);
function onChange({ target: { validity, files } }) {
if (validity.valid) mutate({ variables: { files } });
}
return <input type="file" multiple required onChange={onChange} />;
}
File
import { gql, useMutation } from "@apollo/client";
const MUTATION = gql`
mutation ($file: Upload!) {
uploadFile(file: $file) {
success
}
}
`;
function UploadFile() {
const [mutate] = useMutation(MUTATION);
function onChange({
target: {
validity,
files: [file],
},
}) {
if (validity.valid) mutate({ variables: { file } });
}
return <input type="file" required onChange={onChange} />;
}
Blob
import { gql, useMutation } from "@apollo/client";
const MUTATION = gql`
mutation ($file: Upload!) {
uploadFile(file: $file) {
success
}
}
`;
function UploadFile() {
const [mutate] = useMutation(MUTATION);
function onChange({ target: { validity, value } }) {
if (validity.valid) {
const file = new Blob([value], { type: "text/plain" });
// Optional, defaults to `blob`.
file.name = "text.txt";
mutate({ variables: { file } });
}
}
return <input type="text" required onChange={onChange} />;
}
^12.22.0 || ^14.17.0 || >= 16.0.0
> 0.5%, not OperaMini all, not IE > 0, not dead
Consider polyfilling:
Used to mark React Native File
substitutes as it’s too risky to assume all objects with uri
, type
and name
properties are extractable files.
Parameter | Type | Description |
---|---|---|
file | ReactNativeFileSubstitute | A React Native File substitute. |
Ways to import
.
import { ReactNativeFile } from "apollo-upload-client";
import ReactNativeFile from "apollo-upload-client/public/ReactNativeFile.js";
Ways to require
.
const { ReactNativeFile } = require("apollo-upload-client");
const ReactNativeFile = require("apollo-upload-client/public/ReactNativeFile.js");
A file in React Native that can be used in query or mutation variables.
const file = new ReactNativeFile({ uri: uriFromCameraRoll, name: "a.jpg", type: "image/jpeg", });
Creates a terminating Apollo Link for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList
, File
, Blob
, or ReactNativeFile
instances), or else fetches a regular GraphQL POST or GET request (depending on the config and GraphQL operation).
Some of the options are similar to the createHttpLink
options.
Parameter | Type | Description |
---|---|---|
options | object | Options. |
options.uri | string? = /graphql | GraphQL endpoint URI. |
options.useGETForQueries | boolean? | Should GET be used to fetch queries, if there are no files to upload. |
options.isExtractableFile | ExtractableFileMatcher? = isExtractableFile | Customizes how files are matched in the GraphQL operation for extraction. |
options.FormData | class? | FormData implementation to use, defaulting to the FormData global. |
options.formDataAppendFile | FormDataFileAppender? = formDataAppendFile | Customizes how extracted files are appended to the FormData instance. |
options.fetch | Function? | fetch implementation to use, defaulting to the fetch global. |
options.fetchOptions | FetchOptions? | fetch options; overridden by upload requirements. |
options.credentials | string? | Overrides options.fetchOptions.credentials . |
options.headers | object? | Merges with and overrides options.fetchOptions.headers . |
options.includeExtensions | boolean? = false | Toggles sending extensions fields to the GraphQL server. |
Returns: ApolloLink — A terminating Apollo Link.
Ways to import
.
import { createUploadLink } from "apollo-upload-client";
import createUploadLink from "apollo-upload-client/public/createUploadLink.js";
Ways to require
.
const { createUploadLink } = require("apollo-upload-client");
const createUploadLink = require("apollo-upload-client/public/createUploadLink.js");
A basic Apollo Client setup.
import { ApolloClient, InMemoryCache } from "@apollo/client"; import createUploadLink from "apollo-upload-client/public/createUploadLink.js"; const client = new ApolloClient({ cache: new InMemoryCache(), link: createUploadLink(), });
The default implementation for createUploadLink
options.formDataAppendFile
that uses the standard FormData.append
method.
Type: FormDataFileAppender
Parameter | Type | Description |
---|---|---|
formData | FormData | FormData instance to append the specified file to. |
fieldName | string | Field name for the file. |
file | * | File to append. |
Ways to import
.
import { formDataAppendFile } from "apollo-upload-client";
import formDataAppendFile from "apollo-upload-client/public/formDataAppendFile.js";
Ways to require
.
const { formDataAppendFile } = require("apollo-upload-client");
const formDataAppendFile = require("apollo-upload-client/public/formDataAppendFile.js");
The default implementation for createUploadLink
options.isExtractableFile
.
Type: ExtractableFileMatcher
Parameter | Type | Description |
---|---|---|
value | * | Value to check. |
Returns: boolean — Is the value an extractable file.
Ways to import
.
import { isExtractableFile } from "apollo-upload-client";
import isExtractableFile from "apollo-upload-client/public/isExtractableFile.js";
Ways to require
.
const { isExtractableFile } = require("apollo-upload-client");
const isExtractableFile = require("apollo-upload-client/public/isExtractableFile.js");
A function that checks if a value is an extractable file.
Type: Function
Parameter | Type | Description |
---|---|---|
value | * | Value to check. |
Returns: boolean — Is the value an extractable file.
isExtractableFile
has this type.How to check for the default exactable files, as well as a custom type of file.
import isExtractableFile from "apollo-upload-client/public/isExtractableFile.js"; const isExtractableFileEnhanced = (value) => isExtractableFile(value) || (typeof CustomFile !== "undefined" && value instanceof CustomFile);
GraphQL request fetch
options.
Type: object
Property | Type | Description |
---|---|---|
headers | object | HTTP request headers. |
credentials | string? | Authentication credentials mode. |
Appends a file extracted from the GraphQL operation to the FormData
instance used as the fetch
options.body
for the GraphQL multipart request.
Parameter | Type | Description |
---|---|---|
formData | FormData | FormData instance to append the specified file to. |
fieldName | string | Field name for the file. |
file | * | File to append. The file type depends on what the ExtractableFileMatcher extracts. |
formDataAppendFile
has this type.createUploadLink
accepts this type in options.formDataAppendFile
.A React Native File
substitute.
Be aware that inspecting network traffic with buggy versions of dev tools such as Flipper can interfere with the React Native FormData
implementation, causing multipart requests to have network errors.
Type: object
Property | Type | Description |
---|---|---|
uri | string | Filesystem path. |
name | string? | File name. |
type | string? | File content type. Some environments (particularly Android) require a valid MIME type; Expo ImageResult.type is unreliable as it can be just image . |
A camera roll file.
const fileSubstitute = { uri: uriFromCameraRoll, name: "a.jpg", type: "image/jpeg", };
Download Details:
Author: jaydenseric
Source Code: https://github.com/jaydenseric/apollo-upload-client
License: MIT
#apollo #graphql