Skip to content

Commit

Permalink
move the docs 🎉
Browse files Browse the repository at this point in the history
  • Loading branch information
James Baxley committed Oct 17, 2017
2 parents 0cce1f4 + a011164 commit 8540da5
Show file tree
Hide file tree
Showing 36 changed files with 1,760 additions and 0 deletions.
8 changes: 8 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,11 @@ yarn.lock

# npm
package-lock.json

# docs
db.json
*.log
public/
.deploy*/
.idea/
docs.json
6 changes: 6 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
[submodule "themes/meteor"]
path = themes/meteor
url = https://github.com/meteor/hexo-theme-meteor.git
[submodule "code"]
path = code
url = https://github.com/apollographql/apollo-client.git
14 changes: 14 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# docs

[![Greenkeeper badge](https://badges.greenkeeper.io/apollographql/core-docs.svg)](https://greenkeeper.io/)

To run:

```
git submodule init
git submodule update
cd code && npm install
cd ..
npm install
npm start
```
105 changes: 105 additions & 0 deletions docs/_config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Apollo Vanilla JS Guide
subtitle: Core API Documentation for the Apollo JS GraphQL Client
description:
author:
language:
timezone:
versions:
- '1'

# This setting also defines the page order used to generate the Previous/Next links at the bottom of each page
sidebar_categories:
null:
- index
- apollo-client-api
'Technical Documentation':
- network
- read-and-write
- devtools
- how-it-works
Integrations:
- meteor
- vue
- polymer
- ember

# not sure if we should rename this?
github_repo: apollostack/docs
content_root: source

typescript_api_box:
data_file: docs.json

social_links:
github: 'https://github.com/apollostack'
twitter: '@apollostack'

# API keys
apis:
segment: wgrIo8Bul0Ujl8USETG3DB6hONdy4kTg
gtm: GTM-PNFDVBB

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://dev.apollodata.com/core
root: /core/
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: meteor

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type:
1 change: 1 addition & 0 deletions docs/assets/theme-colors.less
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@color-primary: #22A699;
25 changes: 25 additions & 0 deletions docs/circle.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
machine:
node:
version: 4

checkout:
post:
- git submodule update --init

dependencies:
cache_directories:
- "site/node_modules"
override:
- npm install -g hexo-cli
- npm install

test:
override:
# maybe we will need tests in the future
- echo 'ok!'

deployment:
s3:
branch: /^(master|version-.*)/
commands:
- npm run deploy
33 changes: 33 additions & 0 deletions docs/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.2.2"
},
"dependencies": {
"hexo": "3.3.8",
"hexo-generator-archive": "^0.1.2",
"hexo-generator-category": "^0.1.2",
"hexo-generator-index": "^0.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.2.0",
"hexo-renderer-marked": "^0.2.4",
"hexo-renderer-less": "^0.2.0",
"hexo-server": "^0.2.0",
"hexo-typescript-api-box": "0.9.1",
"typedoc": "^0.7.0"
},
"devDependencies": {
"hexo-s3-deploy": "^1.2.1"
},
"scripts": {
"postinstall":
"cd code && npm install && npm uninstall typescript && npm install typescript@2.1.6",
"build": "cd code; typedoc --json ../docs.json --ignoreCompilerErrors",
"prestart": "npm run build",
"start": "hexo serve",
"predeploy": "npm run build",
"deploy": "hexo-s3-deploy"
}
}
86 changes: 86 additions & 0 deletions docs/source/apollo-client-api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
---
title: API Reference (apollo-client)
order: 11
description: The API for the apollo-client package
---

<h2 id="apollo-client">ApolloClient</h2>

The `ApolloClient` class is the core API for Apollo, and the one you'll need to use no matter which integration you are using:

{% tsapibox ApolloClient.constructor %}
{% tsapibox ApolloClient.watchQuery %}
{% tsapibox ApolloClient.query %}
{% tsapibox ApolloClient.mutate %}
{% tsapibox ApolloClient.readQuery %}
{% tsapibox ApolloClient.readFragment %}
{% tsapibox ApolloClient.writeQuery %}
{% tsapibox ApolloClient.writeFragment %}
{% tsapibox ApolloClient.reducer %}
{% tsapibox ApolloClient.dataId %}
{% tsapibox ApolloClient.dataIdFromObject %}
{% tsapibox ApolloClient.middleware %}
{% tsapibox ApolloClient.initStore %}
{% tsapibox ApolloClient.setStore %}
{% tsapibox ApolloClient.resetStore %}

<h2 id="ObservableQuery">ObservableQuery</h2>

{% tsapibox ObservableQuery.subscribe %}
{% tsapibox ObservableQuery.variables %}
{% tsapibox ObservableQuery.result %}
{% tsapibox ObservableQuery.currentResult %}
{% tsapibox ObservableQuery.refetch %}
{% tsapibox ObservableQuery.setOptions %}
{% tsapibox ObservableQuery.setVariables %}
{% tsapibox ObservableQuery.fetchMore %}
{% tsapibox ObservableQuery.updateQuery %}
{% tsapibox ObservableQuery.startPolling %}
{% tsapibox ObservableQuery.stopPolling %}

<h2 id="ApolloError">ApolloError</h2>

{% tsapibox ApolloError.constructor %}
{% tsapibox ApolloError.message %}
{% tsapibox ApolloError.graphQLErrors %}
{% tsapibox ApolloError.networkError %}
{% tsapibox ApolloError.extraInfo %}

<h2 id="DataProxy">DataProxy</h2>

An interface to the normalized data in your store. `ApolloClient` implements this interface and so do various other objects you may receive when updating the store. A `DataProxy` is used in the `update` function on `client.mutate` to give you a window into your normalized data.

This interface is currently only used in the context of the `update` function provided to [`ApolloClient.mutate`](apollo-client-api.html#ApolloClient.mutate).

{% tsapibox DataProxy.readQuery %}
{% tsapibox DataProxy.readFragment %}
{% tsapibox DataProxy.writeQuery %}
{% tsapibox DataProxy.writeFragment %}

<h2 id="utilities">Utilities</h2>

{% tsapibox createNetworkInterface %}
<!-- XXX: fix aliasing-->
{% tsapibox addTypenameToSelectionSet %}

<h2 id="types">Types</h2>

{% tsapibox ApolloQueryResult %}
{% tsapibox ApolloCurrentResult %}
{% tsapibox ApolloStore %}
{% tsapibox NetworkStatus %}
{% tsapibox NetworkInterface %}
{% tsapibox NetworkInterfaceOptions %}
{% tsapibox HTTPNetworkInterface %}
{% tsapibox BatchedNetworkInterface %}
{% tsapibox NormalizedCache %}
{% tsapibox ApolloReducerConfig %}
{% tsapibox MutationBehaviorReducerArgs %}
{% tsapibox MutationArrayInsertBehavior %}
{% tsapibox MutationArrayDeleteBehavior %}
{% tsapibox MutationDeleteBehavior %}
{% tsapibox Request %}
{% tsapibox StoreObject %}
{% tsapibox FragmentMap %}
{% tsapibox Observer %}
{% tsapibox Subscription %}
Binary file added docs/source/assets/client-diagrams/1-overview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/source/assets/client-diagrams/2-map.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/source/assets/client-diagrams/3-minimize.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/source/assets/devtools/devtools.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/source/assets/devtools/mutation-init.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/source/assets/devtools/mutation-result.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/source/assets/devtools/query-init-data.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/source/assets/devtools/query-init.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/source/assets/devtools/query-result.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 61 additions & 0 deletions docs/source/devtools.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
---
title: Developer tools
order: 111
description: How to use extensions and developer tools to get insight into what your app is doing.
---

## Apollo Client Devtools

The [Apollo Client Devtools](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm) is a Chrome extension.

### Features

The devtools appear as an "Apollo" tab in your Chrome inspector, along side the "Elements" and "Console" tabs. There are currently 3 main features of the devtools:

* GraphiQL: Send queries to your server through the Apollo network interface, or query the Apollo cache to see what data is loaded.
* Normalized store inspector: Visualize your GraphQL store the way Apollo Client sees it, and search by field names or values.
* Watched query inspector: View active queries and variables, and locate the associated UI components.

![GraphiQL Console](./assets/devtools/apollo-client-devtools/apollo-devtools-graphiql.png)

Make requests against either your app’s GraphQL server or the Apollo Client cache through the Chrome developer console. This version of GraphiQL leverages your app’s network interface, so there’s no configuration necessary — it automatically passes along the proper HTTP headers, etc. the same way your Apollo Client app does.

![Store Inspector](./assets/devtools/apollo-client-devtools/apollo-devtools-store.png)

View the state of your client-side cache as a tree and inspect every object inside. Visualize the [mental model](https://dev-blog.apollodata.com/the-concepts-of-graphql-bc68bd819be3) of the Apollo cache. Search for specific keys and values in the store and see the path to those keys highlighted.

![Watched Query Inspector](./assets/devtools/apollo-client-devtools/apollo-devtools-queries.png)

View the queries being actively watched on any given page. See when they're loading, what variables they're using, and, if you’re using React, which React component they’re attached to. Angular support coming soon.

### Installation

You can install the extension via the [Chrome Webstore](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm).
If you want to install a local version of the extension instead, skip ahead to the __Developing__ section.

#### Configuration

While your app is in dev mode, the devtools will appear as an "Apollo" tab in your chrome inspector. To enable the devtools in your app even in production, pass `connectToDevTools: true` to the ApolloClient constructor in your app. Pass `connectToDevTools: false` if want to manually disable this functionality.

The "Apollo" tab will appear in the Chrome console if a global `window.__APOLLO_CLIENT__` object exists in your app. Apollo Client adds this hook to the window automatically unless `process.env.NODE_ENV === 'production'`. If you would like to use the devtools in production, just manually attach your Apollo Client instance to `window.__APOLLO_CLIENT__` or pass `connectToDevTools: true` to the constructor.

Find more information about contributing and debugging on the [Apollo Client DevTools GitHub page](https://github.com/apollographql/apollo-client-devtools).


## Redux DevTools

Apollo Client is written from the ground up with the intention of making it easy to understand what is going on in your application. This is one of the main reasons we decided to build on top of Redux, which has an amazing ecosystem of developer tools.

If you don't pass in an existing Redux Store into the `ApolloClient` constructor, then you will get integration by default with the [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) extension. Just install it, open the window, and you'll be able to keep track of all of the requests your client is making and how that affects the internal data Store.

<h2 id="demo">Inspecting your app</h2>

To get started with Redux DevTools, click the DevTools icon in your chrome browser. You will now see the Redux logger.

![DevTools](./assets/devtools/devtools.png)

### Benefits

* Lets you inspect every state and action that comes through either your existing Redux Store or the Apollo Store integration.
* Lets you go back in time by “cancelling” actions.
* If the change in Apollo's `apolloReducer` throws, you will see which action caused this to happen, and what the error was.
10 changes: 10 additions & 0 deletions docs/source/ember.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: Ember
order: 160
description: Specifics about using Apollo in your Ember application.
---

There are two [Ember](http://emberjs.com/) integrations available:

* [ember-apollo-client](https://github.com/bgentry/ember-apollo-client) is maintained by Blake Gentry.
* [ember-apollo](https://github.com/jlevycpa/ember-apollo) is maintained by Jeff Levy.
Loading

0 comments on commit 8540da5

Please sign in to comment.