Skip to content

Commit

Permalink
Readme: refactored readme file
Browse files Browse the repository at this point in the history
  • Loading branch information
praisegeek committed Sep 8, 2020
1 parent 50dc6c2 commit cd56ad5
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 34 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ public
.cache
.env
.env.*
yarn.lock
yarn.lock
pages
3 changes: 2 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ public
.cache
.env
.env.*
yarn.lock
yarn.lock
pages
68 changes: 36 additions & 32 deletions Readme.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
# 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
This plugin provides offline support and non-offline support with AWS Appysnc.

```bash
npm i gatsby-plugin-appsync
```

**This plugin uses Apollo Client and React Apollo Hooks as dependencies. To avoid clashes, remove those dependencies from your project before adding this plugin to package.json.**

## Configuration

Rename **.env.example** created by this plugin inside your root folder to your environment name. e.g **.env.development** if NODE_ENV is set to development. Also change the settings there
Rename **.env.example** created by this plugin inside your root folder to your project's stage name.

Default

```
.env.development
```

Inside .env.development

```text
GATSBY_GRAPHQL_ENDPOINT=http://localhost:20002/graphql
GATSBY_REGION=eu-west-2
GATSBY_COGNITO_USER_POOL_ID=
GATSBY_COGNITO_IDENTITY_POOL_ID=
GATSBY_COGNITO_APP_CLIENT_ID=
GATSBY_S3_BUCKET
GATSBY_S3_REGION
GATSBY_AUTH_API_KEY=da2-fakeApiId123456
GATSBY_GRAPHQL_ENDPOINT=???
GATSBY_REGION=???
GATSBY_COGNITO_USER_POOL_ID=???
GATSBY_COGNITO_IDENTITY_POOL_ID=???
GATSBY_COGNITO_APP_CLIENT_ID=???
GATSBY_S3_BUCKET=???
GATSBY_S3_REGION=???
GATSBY_AUTH_API_KEY=???
GATSBY_AUTH_TYPE=API_KEY | AMAZON_COGNITO_USER_POOLS | AWS_IAM
GATSBY_APOLLO_CLIENT_VERSION=WITH_HOOKS | LEGACY
```

## Plugin default options in node-config.js
Inside node-config.js

```js
module.exports = {
Expand All @@ -50,31 +54,31 @@ module.exports = {

Refer to https://aws-amplify.github.io/docs/js/authentication#manual-setup for setting oauth, cookieStorage and clientMetadata options.

## Usage
## Use cases

**GATSBY_APOLLO_CLIENT_VERSION = WITH_HOOKS**
### React Apollo Hooks ( No offline support )

This version uses React Apollo ( v 3+), with hooks. No offline support.
**Set `GATSBY_APOLLO_CLIENT_VERSION=WITH_HOOKS` as environment variables.**

For example, your imports will be,
This version uses React Apollo ( v 3+). No official offline support for AWS AppSynnc.

Using React Hooks & Components

```js
import { useQuery, useLazyQuery } from "@apollo/react-hooks";
```
import { UseQuery, useLazyQuery, Query, graphql } from "react-apollo";

You can also use
// or

```js
import { Query, graphql } from "react-apollo";
import { useQuery, useLazyQuery } from "@apollo/react-hooks";
```

**GATSBY_APOLLO_CLIENT_VERSION = LEGACY**
### Offline Support ( No React Apollo Hooks )

This version uses React Apollo ( v 2.6), without hooks. With offline support.
**Set `GATSBY_APOLLO_CLIENT_VERSION=LEGACY` as environment variables ( default )**

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
This version uses React Apollo ( v 2.6 )

For example, your imports will be
Only React Apollo components are used

```js
import { Query, Mutation, Subscription, graphql } from "react-apollo-legacy";
Expand Down Expand Up @@ -112,8 +116,8 @@ export default function Rehydrate({ children }) {
- SSR ready
- One point configuration without additional npm installs
- Provides Amplify Auth and Storage configs out of the box
- Available everywhere on your component tree
- Available everywhere in your component tree

## TODO

- Offline support in React Hooks in React Apollo v3+
- [ ] AWS AppSync Offline support in React Hooks in React Apollo v3+
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@
"react-apollo": "^3.1.3",
"react-apollo-legacy": "npm:react-apollo@2.5.6"
},
"publishConfig": {
"registry": "https://npm.pkg.github.com/"
},
"repository": {
"type": "git",
"url": "https://github.com/praisegeek/gatsby-plugin-appsync.git"
Expand Down

0 comments on commit cd56ad5

Please sign in to comment.