apollo-client#ApolloClient JavaScript Examples

export default function createApolloClient(initialState, ctx) {
  const linkOpts = {
    uri: apiUrl, // Server URL (must be absolute)
    credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
    fetch,
  };

  // The `ctx` (NextPageContext) will only be present on the server.
  // use it to extract auth headers (ctx.req) or similar.
  // The Keystone session ID cookie will be present here if this is SSR and
  // the user has a session.
  const sid = ctx && ctx['keystone.sid'];
  if (sid) linkOpts.headers = { 'keystone.sid': ctx['keystone.sid'] };

  return new ApolloClient({
    ssrMode: Boolean(ctx),
    link: new HttpLink(linkOpts),
    cache: new InMemoryCache().restore(initialState),
  });
}

export function newApolloClient({ provider }) {
  const tb = new Tightbeam({
    providerSource: () => provider,
    abiMapping: newAbiMapping()
  })
  const cache = new InMemoryCache()
  cache.writeData(tb.defaultCacheData())
  const client = new ApolloClient({
    cache,
    resolvers: tb.resolvers(),
    typeDefs: typeDefs
  });

  client.watchQuery({
    query: gql`query {
      network @client {
        id
        chainId
        name
      }
    }`,
    pollInterval: 2000,
    fetchPolicy: 'network-only'
  }).subscribe()

  client.watchQuery({
    query: gql`query { account @client }`,
    pollInterval: 2000,
    fetchPolicy: 'network-only'
  }).subscribe()

  return client
}

createApolloClient = ({ endpoint, name, initialState = {} }) => {
  const cache = new InMemoryCache({ fragmentMatcher }).restore(initialState)

  const client = new ApolloClient({
    name,
    cache,
    typeDefs: getTypeDefs(),
    link: createLinks({ cache, endpoint }),
  })

  return client
}

client = new ApolloClient({
  link: trackMetrics.concat(httpLink),
  cache: new InMemoryCache(),
  request: (operation) => {
    operation.setContext({
      fetchOptions: {
        mode: "no-cors",
      },
    });
  },
  defaultOptions: {
    query: {
      fetchPolicy: "network-only",
      errorPolicy: "all",
    },
  },
})

apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

blockClient = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.thegraph.com/subgraphs/name/pancakeswap/blocks',
  }),
  cache: new InMemoryCache(),
})

healthClient = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.thegraph.com/index-node/graphql',
  }),
  cache: new InMemoryCache(),
  shouldBatch: true,
})

client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.thegraph.com/subgraphs/name/pancakeswap/exchange',
  }),
  cache: new InMemoryCache(),
  shouldBatch: true,
})

client = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

client = new ApolloClient({
  cache,
  link
})

client = new ApolloClient({
  link: createHttpLink({uri: 'http://devcloud3.digihcs.com:14047/graphqlhrm'}),
  cache: new InMemoryCache(),
  // link: ApolloLink.from([errorLink, authLink, terminalLink]),
})

client = new ApolloClient({
  link: split(
    operation => operation.getContext().clientName === "github", // Routes the query to the proper client
    githubLink,
    thegraphLink
  ),
  cache: new InMemoryCache()
})

client = new ApolloClient({ link: httpLink, cache })

blockClient = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.fura.org/subgraphs/name/spookyswap',
  }),
  cache: new InMemoryCache(),
})

stakingClient = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.thegraph.com/subgraphs/name/way2rach/talisman',
  }),
  cache: new InMemoryCache(),
  shouldBatch: true,
})

healthClient = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.fura.org/subgraphs/name/spookyswap',
  }),
  cache: new InMemoryCache(),
  shouldBatch: true,
})

client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.fura.org/subgraphs/name/spookyswap'
    ,
  }),
  cache: new InMemoryCache(),
  shouldBatch: true,
})

client = new ApolloClient({
  link: ApolloLink.from([
    networkStatusNotifierLink,
    authLink,
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors)
        graphQLErrors.forEach(({ message, path }) =>
          console.error(`[GraphQL error]: Message: ${message}, Path: ${path}`),
        );

      if (networkError) console.error(`[Network error]: ${networkError}`);

      if (graphQLErrors && graphQLErrors[0]) {
        const errors = graphQLErrors[0];
        switch (errors.extensions.code) {
          case 'UNAUTHENTICATED':
            if (!window.location.pathname.startsWith('/auth')) {
              window.location.href = '/auth/signin';
            }
            break;
          case 'ANOTHER_ERROR_CODE':
            break;
          default:
        }
      }
    }),
    createUploadLink({
      uri: process.env.REACT_APP_GRAPHQL_URL,
      credentials: 'include',
    }),
  ]),
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'no-cache',
    },
    query: {
      fetchPolicy: 'no-cache',
    },
    mutate: {
      errorPolicy: 'all',
    },
  },
  credentials: "include"
})

function App() {
  const { getIdTokenClaims } = useAuth0();
  const [authToken, setAuthToken] = useState();

  const request = async operation => {
    const token = await getIdTokenClaims();
    setAuthToken(token.__raw);
    operation.setContext(context => ({
      headers: {
        ...context.headers,
        Authorization: token.__raw,
      },
    }));
  };

  const requestLink = new ApolloLink(
    (operation, forward) =>
      new Observable(observer => {
        let handle;
        Promise.resolve(operation)
          .then(oper => {
            request(oper)
          })
          .then(() => {
            handle = forward(operation).subscribe({
              next: observer.next.bind(observer),
              error: observer.error.bind(observer),
              complete: observer.complete.bind(observer),
            });
          })
          .catch(observer.error.bind(observer));
        return () => {
          if (handle) handle.unsubscribe();
        };
      })
  );

  const httpLink = new HttpLink({ 
    uri: process.env.REACT_APP_API_URL,
    credentials: "same-origin", 
  });

  var location = window.location, new_uri;

  location.protocol === "https:" ? new_uri = "wss://" : new_uri = "ws://";

  const wsLink = new WebSocketLink({
    uri: `${new_uri}${process.env.REACT_APP_WS_URL}`,
    options: {
      reconnect: true,
      connectionParams: {
        authToken: authToken,
      }
    }
  });

  const link = split(
    // split based on operation type
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return (
        kind === 'OperationDefinition' &&
        operation === 'subscription'
      );
    },
    wsLink,
    httpLink,
  );

  const client = new ApolloClient({
    link: ApolloLink.from([
      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}`);
      }),
      requestLink,
      link
    ]),
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <div className="App">
        <Router>
          <Accessibility path="/accessibility" />
          <PrivacyPolicy path="/privacy-policy" />
          <PrivateRoute path="/" component={DashRouter}>
            <UserProfile path="/" />
            <EventsCalendar path="calendar" />
            <ActivityList path="calendar/:eventId" />
            <MyEvents path="myevents" />
            <MyEventDetails path="myevents/:eventId" />
            <ManageEvents path="manage" />
            <ManageUsers path="users" />
            <ChatFeature path="chats" />
          </PrivateRoute>
        </Router>
      </div>
    </ApolloProvider>
  );
}