menu

Apollo

A community of developers, designers and others who love Apollo and GraphQL. 🚀

Channels
# All channels
view-forward
# General
view-forward
# Apollo Angular
view-forward
# Announcements
view-forward
# Apollo Android
view-forward
# Apollo Client
view-forward
# Apollo iOS
view-forward
# Apollo Link
view-forward
# Apollo Link Rest
view-forward
# Local State
view-forward
# Apollo Studio
view-forward
# Apollo Server
view-forward
# Apollo Tooling
view-forward
# Contributing
view-forward
# Docs
view-forward
# Events
view-forward
# GraphQL Tools
view-forward
# Jobs
view-forward
# Random
view-forward
# React Apollo
view-forward
# Showcase
view-forward
# Subscriptions
view-forward
# Testing
view-forward
# Vue Apollo
view-forward
Team

ApolloLink

September 20, 2019 at 3:03am
I am using ApolloClient from apollo-boost and want to be able to add a link that can terminate the operation before making an http request. I know it will fail and want to just save something in local storage and terminate the link. Any ideas on where to look for an example of this?

September 20, 2019 at 10:40am
First you'll need to move from apollo-boost to apollo-client: https://www.apollographql.com/docs/react/advanced/boost-migration/
  • reply
  • like
Next, look at the documentation for links: https://www.apollographql.com/docs/link/overview/
  • reply
  • like
It would probably also help to look at the docs for zen-observable: https://github.com/zenparsing/zen-observable
  • reply
  • like
If you get stuck, I'd suggest looking at the source code for other existing links (such as apollo-link-retry): https://github.com/apollographql/apollo-link/tree/master/packages
Edited
  • reply
  • like
awesome thanks! I will check that out!
  • reply
  • like
import { InMemoryCache } from 'apollo-cache-inmemory'
import { onError } from 'apollo-link-error'
import { ApolloLink, Observable } from 'apollo-link'
import { ApolloClient } from 'apollo-client'
import { RetryLink } from 'apollo-link-retry'
import { setContext } from 'apollo-link-context'
import { createUploadLink } from 'apollo-upload-client'
import { getToken } from '../asyncStorage/GetAccessToken'
import { API_URL } from '../../environment'
const uri = `${API_URL}/graphql/`
const retryLink = new RetryLink({
delay: {
initial: 300,
max: Infinity,
jitter: true,
},
attempts: {
max: Infinity,
retryIf: (error, _operation) => !!error,
},
})
const authLink = setContext(async (req, { headers }) => {
const token = await getToken()
return {
...headers,
headers: {
authorization: token ? `Bearer ${token}` : null,
},
}
})
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
),
)
if (networkError) console.log(`[Network error]: ${networkError}`)
})
const localStorageProducts = {
data: {
products: [
{
code: '049000076028',
description: 'Some Product',
id: '2284',
name: 'Some Name',
secondaryCode: '',
__typename: 'Product',
},
],
},
}
const ExampleLink = new ApolloLink((operation, forward) => {
if (operation.operationName === 'GetProducts') {
// terminate the link, no HTTP request, return data from different source
return new Observable(observer => {
observer.next(localStorageProducts)
observer.complete()
})
}
if (operation.operationName === 'MergeData') {
// this is how you let it go on... then you can modify the data
return forward(operation).map(data => {
// can modify the data here and return what you want, must be shaped correctly
console.log(data)
})
}
// pass through
return forward(operation)
})
const loggerLink = new ApolloLink((operation, forward) => {
console.log('logger: ', operation.operationName)
return forward(operation)
})
const link = ApolloLink.from([
ExampleLink,
authLink,
loggerLink,
retryLink,
errorLink,
createUploadLink({ uri }),
])
const client = new ApolloClient({
link,
cache: new InMemoryCache(),
})
export default client
  • reply
  • like
thank you ! I was able to finally figure out how to accomplish what I wanted. Here is an example of what I did if it ever helps anyone else. Look at the ExampleLink specifically.
  • reply
  • like

May 28, 2020 at 7:29pm
thx! this helped me a lot!
  • reply
  • like