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