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:
# installing cache addons and react package
yarn add apollo-link-state-fragment apollo-fragment-react -Sor
# installing cache addons and react package
yarn add apollo-link-state-fragment apollo-fragment-vue -SUsage
To get started you will want to add the fragmentCacheRedirect to your
InMemoryCache cacheRedirect map.
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.
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
import { useApolloFragment } from "apollo-fragment-react";
const fragment = `
fragment fragmentFields on Person {
idea
name
__typename
}
`;
function App() {
const { data } = useApolloFragment(fragment, "1");
return (
<section>
<p>
This component is "watching" a fragment in the cache, it will render the
persons name once the data enters
</p>
<p>{data && `Person Name: ${data.name || ""}`}</p>
<button
onClick={function() {
client.query({
query: gql`
query peeps {
people {
id
name
}
}
`,
});
}}
>
Click to load people
</button>
</section>
);
}Vue
<template>
<div>
<p>
This list is created by calling a GraphQL Fragment with ApolloFragment
</p>
<ApolloFragment :fragment="fragment" :id="id">
<template slot-scope="{ result: { loading, error, data } }">
<div v-if="loading" class="loading apollo">Loading...</div>
<!-- Error -->
<div v-else-if="error" class="error apollo">An error occured</div>
<!-- Result -->
<div v-else-if="data" class="result apollo">
<p>ID: {{data.id}} - {{data.name}}</p>
</div>
<!-- No result -->
<div v-else class="no-result apollo">
<p>No result :(</p>
</div>
</template>
</ApolloFragment>
</div>
</template>
<script>
const fragment = `
fragment fragmentFields on Person {
idea
name
__typename
}
`;
export default {
name: "Example",
data() {
return {
id: "1",
fragment,
};
},
};
</script>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.