Gatsby-plugin-appsync NPM

Gatsby Plugin AppSync

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 gatsby-plugin-appsync

Usage

Rename .env.example. on the root of your project to your .env.stage-name and replace variables to your own.

For example,

.env.development

Add plugin in gatsby-config.js

Usage with react hooks but no offline support yet

module.exports = {
  plugins: [
   "gatsby-plugin-appsync",
    ...
  ]
};

Same usage applies as using the latest version of React Apollo ( v 3+), with hooks.

For example,

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-plugin-appsync",
      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

For example,

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 For legacy mode only with offline support

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

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

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