Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/habx/apollo-multi-endpoint-link
⛓ Apollo link which add an api directive to fetch data from multi endpoints
https://github.com/habx/apollo-multi-endpoint-link
apollo-client apollo-link apollographql graphql
Last synced: about 2 months ago
JSON representation
⛓ Apollo link which add an api directive to fetch data from multi endpoints
- Host: GitHub
- URL: https://github.com/habx/apollo-multi-endpoint-link
- Owner: habx
- License: mit
- Created: 2020-03-05T10:27:59.000Z (almost 5 years ago)
- Default Branch: dev
- Last Pushed: 2023-12-15T11:23:03.000Z (about 1 year ago)
- Last Synced: 2024-11-30T09:38:52.731Z (2 months ago)
- Topics: apollo-client, apollo-link, apollographql, graphql
- Language: TypeScript
- Homepage:
- Size: 3.41 MB
- Stars: 132
- Watchers: 4
- Forks: 14
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
## Apollo link which add an api directive to fetch data from multi endpoints
[](https://app.circleci.com/pipelines/github/habx/apollo-multi-endpoint-link)
[](https://www.npmjs.com/package/@habx/apollo-multi-endpoint-link)
[](https://bundlephobia.com/result?p=@habx/apollo-multi-endpoint-link)
[](/LICENSE)
### Why ?
We wrote [an article](https://www.habx.com/tech/micro-graphql-schema) about why and how we did this link if you want more details.
### Install
```bash
npm i @habx/apollo-multi-endpoint-link
```
### Setup
```typescript
import { createHttpLink } from "apollo-link-http";
new ApolloClient({
link: ApolloLink.from([
new MultiAPILink({
endpoints: {
housings: 'https://housings.api',
projects: 'https://projects.api',
...
},
createHttpLink: () => createHttpLink(),
}),
])
})
```
NB: Since default value of `httpSuffix` is `/graphql`, endpoints above will be transformed to `https://housings.api/graphql` and `https://projects.api/graphql`.
If you do not have common suffix, you can pass an empty string as `httpSuffix` to avoid this transformation.
NB 2: Supports [apollo-link-rest](https://github.com/apollographql/apollo-link-rest) library
##### API
```typescript
new MultiAPILink(config, request);
```
###### config
| Parameter | Description | Default | Required |
| --------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------- |
| endpoints | Dictionary of endpoints | | Yes |
| defaultEndpoint | Default endpoint | | No |
| createHttpLink | Function to generate http link like [apollo-link-http](https://www.apollographql.com/docs/link/links/http/) | | Yes |
| createWsLink | Function to generate wsLink like [apollo-link-ws](https://www.apollographql.com/docs/link/links/ws/) | | No |
| wsSuffix | Suffix added to endpoint for subscriptions queries | /graphql/subscriptions | No |
| httpSuffix | Suffix added to endpoint for http queries | /graphql | No |
| getContext | Callback function called to set custom [context](https://www.apollographql.com/docs/link/links/http/#context) like headers | | No |
| prefixTypenames | Add name argument passed in `@api` directive to every \_\_typename contained in network data response | | No |
### Queries
#### Query with static api name :
```graphql
query projectList($params: Params) @api(name: projects) {
projects(params: $params) {
nodes {
id
name
}
}
}
```
```ts
const response = useQuery(myQuery);
```
#### Query with dynamic api name
```graphql
query projectList($params: Params) @api(contextKey: "apiName") {
projects(params: $params) {
nodes {
id
name
}
}
}
```
```ts
const response = useQuery(myQuery, { context: { apiName: "projects" } });
```
#### Setting custom context
Sometimes you might need to set custom [apollo link context](https://www.apollographql.com/docs/link/links/http/#context) like `headers` for authentication purpose.
This link allows it by doing as following.
```typescript
new MultiAPILink({
getContext: (endpoint) => {
if (endpoint === 'yourendpoint-with-auth') {
return ({
headers: {
'Authorization': 'xxxx',
}
})
}
return {}
},
...
})
```