abhiaiyer91/apollo-fragment

Use Apollo Link State to connect components to GraphQL fragments in the Apollo Cache

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 -S

or

# 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.

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.