https://github.com/daniman/redux-to-apollo

Simple app built on the GitHub GraphQL API with React, Apollo, and TypeScript.
https://github.com/daniman/redux-to-apollo

Last synced: about 2 months ago
JSON representation

Simple app built on the GitHub GraphQL API with React, Apollo, and TypeScript.

• Host: GitHub
• URL: https://github.com/daniman/redux-to-apollo
• Owner: daniman
• Created: 2019-05-20T22:50:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-10T23:37:47.000Z (over 1 year ago)
• Last Synced: 2024-11-14T15:40:48.076Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 606 KB
• Stars: 23
• Watchers: 3
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - redux-to-apollo

README

        
## GraphQL + React + TypeScript with Apollo

Simple app built on the GitHub GraphQL API with React, Apollo, and TypeScript. Project bootstrapped with `create-react-app`.

### Configure your app

#### 1. GitHub personal access token

Get a [personal access token from your GitHub account](https://github.com/settings/tokens), create a file called `src/key.js`, and put your token in it like so:

```

module.exports = {

  github: 'aaBBccDDeeee_YOUR_GITHUB_TOKEN_eeeeZZ'

};

```

We will use this to authenticate our queries against the GitHub API.

It's important to note that **your GitHub access token is extremely valuable and something you should keep a secret**. The way we're using it here for local development is OK, but you should _NOT_ host this app anywhere publicly. If you do, your personal GitHub token will be leaked. If you want to host this app publicly, you will need to integrate your app with GitHub OAuth so that your personal access token does not end up in your JavaScript bundle.

#### 2. Set up your apollo.config.js

To get the full value of schema intellisense from the Apollo VS Code extension, we will need to make our editor aware of the GitHub API's schema. To do this, we'll add an `apollo.config.js` to the root of our project:

```

const keys = require('./src/keys');

module.exports = {

  client: {

    service: {

      name: 'github',

      url: 'https://api.github.com/graphql',

      headers: {

        Authorization: `bearer ${keys.github}`

      },

      skipSSLValidation: true

    }

  }

};

```

### Running the app

To run the app:

```

npm install && npm start

```