const client = new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) => console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`));
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
}
}),
new HttpLink({
uri: 'http://localhost:8000/graphql',
}),
]),
cache: new InMemoryCache(),
});
import {
ApolloLink,
Operation,
FetchResult,
Observable,
} from '@apollo/client/core';
import { print, GraphQLError } from 'graphql';
import { createClient, ClientOptions, Client } from 'graphql-ws';
class WebSocketLink extends ApolloLink {
private client: Client;
constructor(options: ClientOptions) {
super();
this.client = createClient(options);
}
public request(operation: Operation): Observable<FetchResult> {
return new Observable((sink) => {
return this.client.subscribe<FetchResult>(
{ ...operation, query: print(operation.query) },
{
next: sink.next.bind(sink),
complete: sink.complete.bind(sink),
error: (err) => {
if (err instanceof Error) {
return sink.error(err);
}
if (err instanceof CloseEvent) {
return sink.error(
// reason will be available on clean closes
new Error(
`Socket closed with event ${err.code} ${err.reason || ''}`,
),
);
}
return sink.error(
new Error(
(err as GraphQLError[])
.map(({ message }) => message)
.join(', '),
),
);
},
},
);
});
}
}
const link = new WebSocketLink({
url: 'ws://where.is:4000/graphql',
connectionParams: () => {
const session = getSession();
if (!session) {
return {};
}
return {
Authorization: `Bearer ${session.token}`,
};
},
});
const client = new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path, extensions }) => {
if(extensions.code === 'UNAUTHENTICATED') {
localStorage.removeItem('jwt');
client.resetStore();
}
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
});
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
}
}),
AuthLink,
link
]),
cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
});
const client = new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path, extensions }) => {
if(extensions.code === 'UNAUTHENTICATED') {
localStorage.removeItem('jwt');
client.resetStore();
}
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
});
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
}
}),
InfoLink,
AuthLink,
link
]),
cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
});
const client = new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path, extensions }) => {
if(extensions.code === 'UNAUTHENTICATED') {
localStorage.removeItem('jwt');
client.resetStore();
}
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
});
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
}
}),
AuthLink,
createUploadLink({
uri: 'http://localhost:8000/graphql',
credentials: 'same-origin',
}),
]),
cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
});