Jaouan/graphql-client-side-first-level-federation

🧪 A Proof-Of-Concept of Client-side GraphQL "First-Level Federation" using Apollo Client and React.

🧪 POC - Client-side GraphQL "First-Level Federation"

Warning

This project is a Proof-Of-Concept. It is intended only for evaluation purposes. Definitly do not try this at home.

A single hook with a unique GraphQL query that fetch data from multiple GraphQL APIs.
Each first-level field has its own source.

✨ Live demo

Usage

Provider

<DataProvider uriByFirstLevelFields={{
  "characters": "https://rickandmortyapi.com/graphql",
  "pokemons": "https://graphql-pokeapi.graphcdn.app",
  "allPlanets": "https://swapi-graphql.netlify.app/.netlify/functions/index"
}}>
    ...
</DataProvider>

Hooks

With Suspense:

const { data } = useSuspenseDataQuery(gql`
   query NameQuery {
     characters {
       results { id name }
     }
     pokemons {
       results { id name }
     }
   }
   query PlanetQuery {
     allPlanets {
       planets { id name }
     }
   }
`);

With basic hook:

const { loading, data, error } = useDataQuery(gql`query { ... }`);