Code Monkey home page Code Monkey logo

apollo-fragment's Introduction

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

Npm download

Vue

Npm download

Link State

Npm download

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 { ApolloFragment } from "apollo-fragment-react";

const fragment = `
  fragment fragmentFields on Person {
    idea
    name
    __typename
  }
`;

function App() {
  return (
    <section>
      <ApolloFragment id="1" fragment={fragment}>
        {({ data }) => {
          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>
            </section>
          );
        }}
      </ApolloFragment>

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

apollo-fragment's People

Contributors

abhiaiyer91 avatar elanhant avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.