Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhiaiyer91/apollo-fragment
Use Apollo Link State to connect components to GraphQL fragments in the Apollo Cache
https://github.com/abhiaiyer91/apollo-fragment
apollo apollo-client apollo-link-state graphql reactjs vuejs
Last synced: 13 days ago
JSON representation
Use Apollo Link State to connect components to GraphQL fragments in the Apollo Cache
- Host: GitHub
- URL: https://github.com/abhiaiyer91/apollo-fragment
- Owner: abhiaiyer91
- Created: 2018-05-20T19:25:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:53:26.000Z (11 months ago)
- Last Synced: 2024-10-19T18:20:57.432Z (25 days ago)
- Topics: apollo, apollo-client, apollo-link-state, graphql, reactjs, vuejs
- Language: TypeScript
- Size: 104 KB
- Stars: 111
- Watchers: 5
- Forks: 7
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Apollo Fragment
Apollo Fragment holds libraries aimed at connecting UI components to GraphQL
fragments in the Apollo Cache.
`apollo-link-state-fragment` exposes a `cacheRedirect` and `withClientState`
configuration for querying fragments from the cache.
`apollo-fragment-react` exposes an `ApolloFragment` query component that will
connect your component to a fragment in cache and automatically watch all
changes to it.
`apollo-fragment-vue` exposes an `ApolloFragment` Vue component that will
connect your component to a fragment in cache and automatically watch all
changes to it.
## Background
Read about this library here: https://medium.com/open-graphql/fragment-driven-uis-with-apollo-17d933fa1cbe
## React
## Vue
## Link State
## Installation
It is simple to add to your current apollo client setup:
```bash
# installing cache addons and react package
yarn add apollo-link-state-fragment apollo-fragment-react -S
```
or
```bash
# installing cache addons and react package
yarn add apollo-link-state-fragment apollo-fragment-vue -S
```
## Usage
To get started you will want to add the `fragmentCacheRedirect` to your
`InMemoryCache` cacheRedirect map.
```js
import { InMemoryCache } from "apollo-cache-inmemory";
import { fragmentCacheRedirect } from "apollo-link-state-fragment";
const cache = new InMemoryCache({
cacheRedirects: {
Query: {
...fragmentCacheRedirect(),
},
},
});
```
Next, import the `fragmentLinkState` and pass in the cache.
```js
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { InMemoryCache } from "apollo-cache-inmemory";
import {
fragmentCacheRedirect,
fragmentLinkState,
} from "apollo-link-state-fragment";
const cache = new InMemoryCache({
cacheRedirects: {
Query: {
...fragmentCacheRedirect(),
},
},
});
const client = new ApolloClient({
link: ApolloLink.from([fragmentLinkState(cache), new HttpLink()]),
cache: new InMemoryCache(),
});
```
Once you have your client setup to make these kind of queries against the cache,
we can now use the View layer integrations: All we have to do is pass the id of
the fragment you're looking for, and the selection set in a named fragment.
## React
```jsx
import { useApolloFragment } from "apollo-fragment-react";
const fragment = `
fragment fragmentFields on Person {
idea
name
__typename
}
`;
function App() {
const { data } = useApolloFragment(fragment, "1");
return (
This component is "watching" a fragment in the cache, it will render the
persons name once the data enters
{data && `Person Name: ${data.name || ""}`}
Click to load people
);
}
```
## Vue
```html
This list is created by calling a GraphQL Fragment with ApolloFragment
Loading...
An error occured
ID: {{data.id}} - {{data.name}}
No result :(
const fragment = `
fragment fragmentFields on Person {
idea
name
__typename
}
`;
export default {
name: "Example",
data() {
return {
id: "1",
fragment,
};
},
};
```
In our examples above, We have used the `ApolloFragment` query component to bind
the current value of the fragment in cache. When a user clicks to load a list of
people, our component subscribed to a user with id "1", will rerender and
display the person's name.