Esta es mi primera publicación de discusión aquí. Aprendí Apollo + GraphQL a través de Odyssey . Actualmente, estoy creando mi propio proyecto usando Next.js, que requería obtener datos de 2 puntos finales de GraphQL .
Mi problema: ¿Cómo puedo obtener datos de múltiples puntos finales de GraphQL con ApolloClient ?
A continuación se muestra mi código para mi primer punto final:
import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client"; const client = new ApolloClient({ ssrMode: true, link: createHttpLink({ uri: "https://api.hashnode.com/", credentials: "same-origin", headers: { Authorization: process.env.HASHNODE_AUTH, }, }), cache: new InMemoryCache(), }); export default client;Lo que está tratando de lograr está un poco en contra del enfoque "One Graph" de Apollo. Eche un vistazo a las puertas de enlace y la federación: https://www.apollographql.com/docs/federation/
Dicho esto, es posible alguna solución pirateada, pero deberá mantener una estructura más compleja y especificar el punto final en cada consulta, lo que socava el mecanismo integrado y puede causar problemas de optimización.
//Declare your endpoints const endpoint1 = new HttpLink({ uri: 'https://api.hashnode.com/graphql', ... }) const endpoint2 = new HttpLink({ uri: 'endpoint2/graphql', ... }) //pass them to apollo-client config const client = new ApolloClient({ link: ApolloLink.split( operation => operation.getContext().clientName === 'endpoint2', endpoint2, //if above endpoint1 ) ... }) //pass client name in query/mutation useQuery(QUERY, {variables, context: {clientName: 'endpoint2'}})Este paquete parece hacer lo que quieres: https://github.com/habx/apollo-multi-endpoint-link
Además, consulte la discusión aquí: https://github.com/apollographql/apollo-client/issues/84
Encourted el mismo problema hoy. Quería tenerlo dinámico, así que esto es lo que se me ocurrió:
export type DynamicLinkClientName = "aApp" | "bApp" | "graphqlApp"; type Link = RestLink | HttpLink; type DynamicLink = { link: Link; name: DynamicLinkClientName }; const LINK_MAP: DynamicLink[] = [ { link: aRestLink, name: "aApp" }, { link: bAppRestLink, name: "bApp" }, { link: graphqlAppLink, name: "graphqlApp" }, ]; const isClientFromContext = (client: string) => (op: Operation) => op.getContext().client === client; const DynamicApolloLink = LINK_MAP.reduce<ApolloLink | undefined>( (prevLink, nextLink) => { // When no name is specified, fallback to defaultLink. if (!prevLink) { return ApolloLink.split( isClientFromContext(nextLink.name), nextLink.link, defaultLink ); } return ApolloLink.split( isClientFromContext(nextLink.name), nextLink.link, prevLink ); }, undefined ) as ApolloLink;