Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@graphiql/create-fetcher
Advanced tools
Readme
@graphiql/create-fetcher
a utility for generating a full-featured fetcher
for GraphiQL including @stream
, @defer
IncrementalDelivery
and multipart
under the hood, it uses graphql-ws
and meros
which act as client reference implementations of the GraphQL over HTTP Working Group Spec specification, and the most popular transport spec proposals
graphiql
and thus react
and react-dom
should already be installed.
you'll need to install @graphiql/create-fetcher
npm
npm install --save @graphiql/create-fetcher
yarn
yarn add @graphiql/create-fetcher
We have a few flexible options to get you started with the client. It's meant to cover the majority of common use cases with a simple encapsulation.
Here's a simple example. In this case, a websocket client isn't even initialized, only http (with multipart @stream
and @defer
support of course!).
import * as React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/create-fetcher';
const url = 'https://myschema.com/graphql';
const fetcher = createGraphiQLFetcher({ url });
export const App = () => <GraphiQL fetcher={fetcher} />;
ReactDOM.render(document.getElementByID('graphiql'), <App />);
Just by providing the subscriptionUrl
, you can generate a graphql-ws
client
import * as React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/create-fetcher';
const url = 'https://myschema.com/graphql';
const subscriptionUrl = 'wss://myschema.com/graphql';
const fetcher = createGraphiQLFetcher({
url,
subscriptionUrl,
});
export const App = () => <GraphiQL fetcher={fetcher} />;
ReactDOM.render(document.getElementByID('graphiql'), <App />);
You can further customize the wsClient
implementation below
url
(required)This is url used for all HTTP
requests, and for schema introspection.
subscriptionUrl
This generates a graphql-ws
client.
wsClient
provide your own subscriptions client. bypasses subscriptionUrl
. In theory, this could be any client using any transport, as long as it matches graphql-ws
Client
signature.
headers
Pass headers to any and all requests
fetch
Pass a custom fetch implementation such as isomorphic-feth
wsClient
ExampleJust by providing the subscriptionUrl
import * as React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { createClient } from 'graphql-ws';
import { createGraphiQLFetcher } from '@graphiql/create-fetcher';
const url = 'https://myschema.com/graphql';
const subscriptionUrl = 'wss://myschema.com/graphql';
const fetcher = createGraphiQLFetcher({
url,
wsClient: createClient({
url: subscriptionUrl,
keepAlive: 2000,
}),
});
export const App = () => <GraphiQL fetcher={fetcher} />;
ReactDOM.render(document.getElementByID('graphiql'), <App />);
fetcher
ExampleFor SSR, we might want to use something like isomorphic-fetch
import * as React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { fetch } from 'isomorphic-fetch';
import { createGraphiQLFetcher } from '@graphiql/create-fetcher';
const url = 'https://myschema.com/graphql';
const fetcher = createGraphiQLFetcher({
url,
fetch,
});
export const App = () => <GraphiQL fetcher={fetcher} />;
ReactDOM.render(document.getElementByID('graphiql'), <App />);
FAQs
A GraphiQL fetcher with `IncrementalDelivery` and `graphql-ws` support
The npm package @graphiql/create-fetcher receives a total of 670 weekly downloads. As such, @graphiql/create-fetcher popularity was classified as not popular.
We found that @graphiql/create-fetcher demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.