I can't setting multiple link.

I setuped multiple link. but I catched error. I want to use apollo client with authLink, httpLink, fileUploadLink.

how do I solve it?

error

Error: undefined
    at new ApolloError (index.ts:49)
    at Object.error (QueryManager.ts:236)
    at notifySubscription (Observable.js:140)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.error (Observable.js:240)
    at iteration.ts:13
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (iteration.ts:13)
    at Object.error (Concast.ts:185)
    at notifySubscription (Observable.js:140)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.error (Observable.js:240)

create apollo client instance

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
import { setContext } from '@apollo/link-context'
import { createUploadLink } from 'apollo-upload-client'
import DotEnv from '../../consts/DotEnv'
import ServiceFactory from '../../modules/ServiceFactory'

const cognitoRepository = ServiceFactory.getCognitoRepository()
const apolloConfig = DotEnv.apolloConfig()

/**
 * cache
 */
const inMemoryCacheOption = {}
const cache = new InMemoryCache(inMemoryCacheOption)

/**
 * http link
 */
const httpLink = createHttpLink({
  uri: apolloConfig.url,
})

/**
 * auth link
 */
const authLink = setContext(async (_, { headers }) => {
  const token = await cognitoRepository.getAccessToken()

  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  }
})

/**
 * file upload link
 */
const fileUploadLink = createUploadLink({
  uri: apolloConfig.url,
})

/**
 * directional link
 */
const directionalLink = authLink.split(
  (operation) => {
    // upload function uses fileUploadLink
    if (
      ['userUploadIcon', 'companyUploadIcon'].includes(operation.operationName)
    ) {
      return false
    }
    return true
  },
  httpLink,
  fileUploadLink,
)

/**
 * ApolloClient
 */
const client = new ApolloClient({
  link: directionalLink,
  uri: apolloConfig.url,
  cache,
})

/**
 * AppApolloManager
 */
export default class AppApolloManager {
  public static getClientInstance() {
    return client
  }

  public static getCache() {
    return cache
  }
}

App.tsx

import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import { ApolloProvider } from '@apollo/client'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import './App.css'
import { Provider } from 'react-redux'
import store from './stores'
import GlobalStyle from './styles/GlobalStyle'

import AppApolloManager from './datas/graphql/AppApolloManager'
import RootRouter from './routes/RootRouter'

const apolloClient = AppApolloManager.getClientInstance()
function App() {
  return (
    <Provider store={store}>
      <ApolloProvider client={apolloClient}>
        <ToastContainer
          position="bottom-center"
          autoClose={1000}
          hideProgressBar
          closeOnClick={false}
          newestOnTop
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />
        <GlobalStyle />
        <Router>
          <RootRouter />
        </Router>
      </ApolloProvider>
    </Provider>
  )
}

export default App

package.json

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.3.11",
    "@apollo/link-context": "^2.0.0-beta.3",
    "@aws-amplify/auth": "^3.4.23",
    "@aws-amplify/core": "^3.8.15",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/graphql": "^14.5.0",
    "@types/graphql-upload": "^8.0.4",
    "@types/jest": "^26.0.15",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.24",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "apollo-upload-client": "^14.1.3",
    "axios": "^0.21.1",
    "date-fns": "^2.18.0",
    "formik": "^2.2.6",
    "fs-capacitor": "^6.2.0",
    "graphql": "^15.5.0",
    "graphql-upload": "^11.0.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "query-string": "^6.13.8",
    "react": "^17.0.1",
    "react-datepicker": "^3.6.0",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-svg-loader": "^3.0.3",
    "react-toastify": "^7.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "styled-components": "^5.2.1",
    "styled-system": "^5.1.5",
    "typescript": "^4.1.3",
    "typescript-fsa": "^3.0.0",
    "typescript-fsa-reducers": "^1.2.2",
    "web-vitals": "^1.0.1",
    "yup": "^0.32.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "generate": "graphql-codegen",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.20.1",
    "@graphql-codegen/typescript": "^1.21.0",
    "@graphql-codegen/typescript-operations": "^1.17.14",
    "@graphql-codegen/typescript-react-apollo": "^2.2.1",
    "@storybook/addon-actions": "^6.1.18",
    "@storybook/addon-essentials": "^6.1.18",
    "@storybook/addon-links": "^6.1.18",
    "@storybook/node-logger": "^6.1.18",
    "@storybook/preset-create-react-app": "^3.1.6",
    "@storybook/react": "^6.1.18",
    "@types/apollo-upload-client": "^14.1.0",
    "@types/fs-capacitor": "^2.0.0",
    "@types/react": "^17.0.3",
    "@types/react-datepicker": "^3.1.5",
    "@types/styled-system": "^5.1.10",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsdoc": "^31.6.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.2.1",
    "prettier-eslint": "^12.0.0"
  }
}

[hirasaki1985]

@hwillson maybe solved.

step.1

I tried to check simple setting.

const client = new ApolloClient({
  link: httpLink,
  uri: apolloConfig.url,
  cache,
})

This is working.

step.2 [not logged in with amplify library (local storage has not amplify data.)]

and then. I also tried to check next simple setting.

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  uri: apolloConfig.url,
  cache,
})

this is not working…

index.js:1 Error: undefined
    at new ApolloError (index.ts:49)
    at Object.error (QueryManager.ts:236)
    at notifySubscription (Observable.js:140)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.error (Observable.js:240)
    at iteration.ts:13
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (iteration.ts:13)
    at Object.error (Concast.ts:185)
    at notifySubscription (Observable.js:140)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.error (Observable.js:240)

but It worked if amplify was logged in.

step.3 change authLink

I have new idea. and, add try catch to authLink.

const authLink = setContext(async (_, { headers }) => {
  try {
    // get the authentication token from local storage if it exists
    const token = await cognitoRepository.getAccessToken()
    console.log('authLink')
    console.log(token)

    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : '',
      },
    }
  } catch (e) {
    console.error(e)
    return {
      headers: {
        ...headers,
        authorization: '',
      },
    }
  }
})

apollo client is working! and show console.error() = No current user.

I guess if httpLink throw Exception, apollo client changes to undefined.

step4. directionalLink

const directionalLink = new RetryLink().split(
  (operation) => {
    // upload function uses fileUploadLink
    if (
      ['userUploadIcon', 'companyUploadIcon'].includes(operation.operationName)
    ) {
      return false
    }
    return true
  },
  from([authLink, httpLink]),
  from([authLink, fileUploadLink]),
)

/**
 * ApolloClient
 */
const client = new ApolloClient({
  link: directionalLink,
  uri: apolloConfig.url,
  cache,
})

this is working.

[hwillson]

It doesn’t sound like there is an outstanding issue here, so closing. Thanks!