dschau / gatsby-mail

A Gatsby email *application*

Gatsby Mail

A proof of concept application that demonstrates a few concepts, namely:

1. App-like functionality with GraphQL, data fetching, mutations, etc.
2. Static creation of pages (e.g. /privacy-policy, /terms-of-service, etc.)
3. Client-side only routes, e.g. dynamic routes
4. Schema stitching with Github's API (requests ⭐ count at build time!)

🚀 Set up

• yarn or npm install
• Request a Github token and give repo full access to the token
• cat .env.sample > .env.development then paste in your access token from gitub
• From the .env.development file, replace the GATSBY_OG_APP_ID with a token from a OneGraph account which you must create
• yarn develop or npm run develop

gatsby-mail's Issues

Use dark mode (by default) if enabled with MacOS mojave

I'm not even 100% sure how to implement this technically on first glance (e.g. with CSS in JS) so this is a fun one!

See Paul Miller - Using Dark Mode in CSS for some more info!

Cannot query field "github" on type "Query"

I just follow the setup, didn't change anything else.

error Plugin gatsby-source-graphql returned an error
...
  ServerError: Response not successful: Received status code 401
...
error GraphQL Error Unknown field `github` on type `Query`
file: [path]/gatsby-mail/src/components/footer.js

   1 |
   2 |         query FooterQuery {
>  3 |           github {
     |           ^
   4 |             repository(owner: "dschau", name: "gatsby-mail") {
   5 |               stargazers {
   6 |                 totalCount
   7 |               }
   8 |             }
   9 |           }
  10 |           site {
  11 |             siteMetadata {
  12 |               repository {
  13 |                 url
 ERROR  Failed to compile with 1 errors                                                                                                                                      12:14:17 AM

 error  in ./src/components/footer.js

Module Error (from ./node_modules/eslint-loader/index.js):

[path]/gatsby-mail/src/components/footer.js
  58:11  error  Cannot query field "github" on type "Query"  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

 @ ./src/layouts/index.js 19:0-42 71:42-48
 @ ./node_modules/gatsby-plugin-layout/wrap-page.js
 @ ./node_modules/gatsby-plugin-layout/gatsby-browser.js
 @ ./.cache/api-runner-browser-plugins.js
 @ ./.cache/api-runner-browser.js
 @ ./.cache/app.js
 @ multi (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

macOS Mojave

sending emails gives a 403

When sending a sendMessage mutation, the GraphQL API exposed by OneGraph fails with

{
  "error": {
    "errors": [
      {
        "domain": "global",
        "reason": "insufficientPermissions",
        "message": "Insufficient Permission"
      }
    ],
    "code": 403,
    "message": "Insufficient Permission"
  }
}

add pagination

Add pagination and use client-side routes to do (for instance) pages/2, pages/3, etc.

Probably load about 100 or so per page

Thanks for building this

I had been looking for an Apollo example for gatsby when I came across this. Good stuff. Interesting OG service too. Checking it out for a project.

Trouble with installation instructions, throwing errors

I followed the instructions in the readme, but npm run develop is throwing errors and failing. Thank you for the help.

What Github API Key Scope(s) should be included

Just finished watching the webinar and checking out your example Gatsby web app.

Under the readme's setup instruction it lists to request/create a Github Token. However it might be helpful to include what scope(s) are necessary to include for this Github Token.

Thanks

TypeError: getNodesByType is not a function

Installing and running out of the box crashes with the error TypeError: getNodesByType is not a function. Similar to gatsbyjs/gatsby#9533, updating gatsby from 2.0.19 to latest seems to fix the error.

messages payload is empty

When querying for messages/emails, the payload field is empty, so I can't display subject, sender, etc.

Something with OneGraph? Here's the query:

query {
  google {
    gmail {
      messages(maxResults: 50) {
        messages {
          id
          payload {
            body {
              data
            }
            from
            to
            subject
          }
        }
      }
    }
  }
}

in my testing the entire payload is null, so can't even infer from, to, etc. etc.

cc @jlengstorf

disabled Gmail API throws an ui error

CASE
disabled Gmail API

ISSUE
onegraph response not handled on UI

{"errors":[{"message":"Unexpected code 403 from Google. Response body: {\n \"error\": {\n \"code\": 403,\n \"message\": \"Gmail API has not been used in project 861228239640 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/gmail.googleapis.com/overview?project=861228239640 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.\",\n \"errors\": [\n {\n \"message\": \"Gmail API has not been used in project 861228239640 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/gmail.googleapis.com/overview?project=861228239640 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.\",\n \"domain\": \"usageLimits\",\n \"reason\": \"accessNotConfigured\",\n \"extendedHelp\": \"https://console.developers.google.com\"\n }\n ],\n \"status\": \"PERMISSION_DENIED\"\n }\n}\n","path":["google","gmail","queryThreads"]}],"data":null}

SOLUTION

1 . add details to README

API link https://console.developers.google.com/apis/library/gmail.googleapis.com

2. JS fix -add data check in src/pages/index.js

{data && data.google && ( <MessageList css={{ paddingBottom: 24 }} threads={data.google.gmail.queryThreads.threads} /> )}

Accessing env variables

Hi,
I copied the .env.sample file to a .env.development one and added my github token to GITHUB_API_TOKEN.

But when I run gatsby develop, I still get the following error:

"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:
Response not successful: Received status code 401

In my browser, I still can't access the env variables (GITHUB_API_TOKEN and GATSBY_OG_APP_ID).

Am I meant to add some plugins like webpack / define to get gatsby-mail work?

"Sign in with Google temporarily disabled for this app"

As installed, Google won't let you authenticate to gatsby-mail. Unlike in the webinar, there is no link to get around the scary warning.

My workaround was to sign up for my own OneGraph account, create an app, and use that App Id for GATSBY_OG_APP_ID in .env.development. In the OneGraph App dashboard I added http://localhost:8000 to CORS Origins, and then I was able to use run and use gatsby-mail locally.