Gatsby Plugin AppSync

Description

A Gatsby plugin that makes working with AWS AppSync Client and React Apollo a breeze.

Quick Start

This plugin comes in two modes for Offline support and Apollo Hooks compatiblity respectively.

Install plugin

npm i @praisegeek/gatsby-plugin-appsync

Usage

Add plugin in gatsby-config.js

Usage with react hooks but no offline support yet

module.exports = {
  plugins: [
   "gatsby-apollo-client",
    ...
  ]
};

Same usage applies as using latest version of React Apollo Version 3+, which supports hooks.

e.g

import { useQuery, useLazyQuery } from "@apollo/react-hooks";

You can also use

import { Query, graphql } from "react-apollo";

For offline support, without apollo react hooks

module.exports = {
  plugins: [
    {
      resolve: "gatsby-apollo-client",
      options: {
        legacy: true // default: false
      }
    }
    ...
  ]
};

Since NPM drop in replacement was used to alias both apollo-client@2.6.4 and react-apollo@2.5.6 for offline support and cold install, Queries, Mutations or Subscriptions can then be imported using the hint below

e.g

import { Query, Mutation, Subscription, graphql } from "react-apollo-legacy";

To enable offline support, ensure "legacy" is set to true in your gatsby-config.js, and "react-apollo-legacy" is the import used

Next Steps

Custom Rehydrate component

// Shadow copy @praisegeek/gatsby-plugin-appsync/src/rehydrate.js

import React from "react";
import { Rehydrated } from "aws-appsync-react";

export default function rehydrate({ children }) {
  return <Rehydrated loading="loading...">{children}</Rehydrated>;
}

Features

• Apollo 3+ support with Hooks
• Offline support ( currently available in legacy mode )
• SSR ready
• One point configuration without additional npm installs