diff --git a/site/_core/CodeLayout.js b/site/_core/CodeLayout.js index a1544937fe..4c6a363edd 100644 --- a/site/_core/CodeLayout.js +++ b/site/_core/CodeLayout.js @@ -17,8 +17,12 @@ var CodeLayout = React.createClass({ var page = this.props.page; var site = this.props.site; var firstURL = '/graphql-js/getting-started/'; + var category = page.category; + if (!category.match(/GraphQL/)) { + category = 'GraphQL.js ' + category; + } return ( - +
diff --git a/site/_core/Site.js b/site/_core/Site.js index a889184366..fe091eb7df 100644 --- a/site/_core/Site.js +++ b/site/_core/Site.js @@ -13,7 +13,8 @@ var SiteData = require('./SiteData'); var Site = React.createClass({ render: function() { - var pageTitle = this.props.title ? `${this.props.title} | GraphQL` : `GraphQL | ${SiteData.description}`; + var suffix = this.props.category || 'GraphQL'; + var pageTitle = this.props.title ? `${this.props.title} | ${suffix}` : `GraphQL | ${SiteData.description}`; return ( diff --git a/site/docs/QuickStart-GettingStarted.md b/site/docs/QuickStart-GettingStarted.md deleted file mode 100644 index 9c7e7fc36f..0000000000 --- a/site/docs/QuickStart-GettingStarted.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: Getting Started -layout: ../_core/DocsLayout -category: Quick Start -permalink: /docs/getting-started/ -next: /docs/videos/ ---- - -Let's build a basic GraphQL server from scratch using **[graphql-js](https://github.com/graphql/graphql-js)**. - -Our server's schema will be simple: it will have one type, a `User`, with two fields, `id` and `name`. -(For an example of a more complex server, check out the **[Walkthrough](../intro)**.) - -## Setup - -Start by making a folder for your demo server: - -```sh -mkdir graphql-demo -cd graphql-demo -``` - -The example server requires **[Node.js](https://nodejs.org/en/)** -and three additional packages for our server: - -1. **[graphql](https://github.com/graphql/graphql-js)**, the reference implementation of GraphQL in JavaScript. -2. **[express](https://github.com/strongloop/express)**, a basic web framework. -3. **[express-graphql](https://github.com/graphql/express-graphql)**, an express middleware that exposes a GraphQL server. - -Install these three packages using **[npm](https://docs.npmjs.com/getting-started/installing-node)**: - -```sh -npm init -f -npm install graphql express express-graphql --save -``` - -## Data - -Our server will consist of two files, `data.json` and `index.js`. -To create these files, run - -```sh -touch data.json -touch index.js -``` - -Now define the user data in `data.json`: - -```json -{ - "1": { - "id": "1", - "name": "Dan" - }, - "2": { - "id": "2", - "name": "Marie" - }, - "3": { - "id": "3", - "name": "Jessie" - } -} -``` - -## Server - -Next you'll create a very basic GraphQL schema to describe the data; -you can then allow this schema to be queried over HTTP. - -Insert the following into `index.js` (and be sure to read the comments!): - -```js -// Import the required libraries -var graphql = require('graphql'); -var graphqlHTTP = require('express-graphql'); -var express = require('express'); - -// Import the data you created above -var data = require('./data.json'); - -// Define the User type with two string fields: `id` and `name`. -// The type of User is GraphQLObjectType, which has child fields -// with their own types (in this case, GraphQLString). -var userType = new graphql.GraphQLObjectType({ - name: 'User', - fields: { - id: { type: graphql.GraphQLString }, - name: { type: graphql.GraphQLString }, - } -}); - -// Define the schema with one top-level field, `user`, that -// takes an `id` argument and returns the User with that ID. -// Note that the `query` is a GraphQLObjectType, just like User. -// The `user` field, however, is a userType, which we defined above. -var schema = new graphql.GraphQLSchema({ - query: new graphql.GraphQLObjectType({ - name: 'Query', - fields: { - user: { - type: userType, - // `args` describes the arguments that the `user` query accepts - args: { - id: { type: graphql.GraphQLString } - }, - // The resolve function describes how to "resolve" or fulfill - // the incoming query. - // In this case we use the `id` argument from above as a key - // to get the User from `data` - resolve: function (_, args) { - return data[args.id]; - } - } - } - }) -}); - -express() - .use('/graphql', graphqlHTTP({ schema: schema, pretty: true })) - .listen(3000); - -console.log('GraphQL server running on http://localhost:3000/graphql'); -``` - - - -That's it - your basic GraphQL server is done! Start it by running - -```sh -node index.js -``` - -The server should announce that it is running at -[localhost:3000/graphql](http://localhost:3000/graphql). -If you navigate to this address you will receive this notice: - -```javascript -{ - "errors": [ - { - "message": "Must provide query string." - } - ] -} -``` - -We know our server is running - now we just need to send it a query! - -## Queries - -Below is a very simple query you can make against your schema. To the right is -the result your server should deliver. Take a moment to read the query and the -result. Note that the result and query have the same basic "shape": whereas the -result is JSON key-value pairs, the query is the just the keys. - - - -You can edit the above query; the result will automatically update when you do. -If you make a syntax mistake it will be underlined in red. Try replacing -`id: "1"` with `id: "2"`; replace `name` with `id` or with `name id`. - -Now that you know what a GraphQL query looks like you can query your own server. -Let's start with the simple query - -``` -{ - user(id: "1") { - name - } -} -``` - -Remove all the whitespace in the query: `{user(id:"1"){name}}` (whitespace is optional in GraphQL). -You can send this to your server via a GET request with a URL query string: -**http://localhost:3000/graphql?query={user(id:"1"){name}}** -- the server should respond with - -```javascript -{ - "data": { - "user": { - "name": "Dan" - } - } -} -``` - -To be standards compliant, the query itself should be URL-encoded. -If you received a GraphQL Syntax Error from the above query, try replacing it with -the URL-encoded version: `%7Buser(id:%221%22)%7Bname%7D%7D`. -(You can URL-encode any string in JavaScript with the global `encodeURI` function.) - -Congratulations! You've built your first GraphQL server. Try different queries, -or changing the data, or even adding new fields to the schema. diff --git a/site/docs/QuickStart-Videos.md b/site/docs/QuickStart-Videos.md deleted file mode 100644 index a4c1c12637..0000000000 --- a/site/docs/QuickStart-Videos.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Videos -layout: ../_core/DocsLayout -category: Quick Start -permalink: /docs/videos/ -next: /docs/intro/ ---- - -As conference presentations are published to YouTube, videos will be posted here -in chronological order. - -## Zero to GraphQL in 30 Minutes - -*Steven Luscher – April 25, 2016* - -Stephen explains how to quickly set up a GraphQL endpoint starting from existing -data services like Django, Rails, or an existing REST API while live-coding -examples in Ruby, Python, and Javascript. - - - -## GraphQL, A Horizontal Platform – @Scale - -*Nick Schrock – September 14, 2015* - -Nick introduces GraphQL and its origin and explains how React and GraphQL are -horizontal platforms which can improve the current state of mobile development. - - - -## Exploring GraphQL – React Rally - -*Lee Byron – August 24, 2015* - -Lee introduces GraphQL and its origin and announces the public release of -GraphiQL, an in-browser GraphQL IDE. - - - -## Using GraphQL – React Rally - -*Nick Schrock – August 24, 2015* - -Nick expands on Lee's talk, explaining how to use GraphQL.js to build a server. -Then introduces how wrapping an existing REST server can be an effective way to -get started with GraphQL and announces the public release of "swapi-graphql" a -wrapper of the Star Wars REST API to illustrate. Many live demos of "swapi-graphql" -using GraphiQL. - - - -## Exploring GraphQL – React Europe - -*Lee Byron – July 2, 2015* - -Lee introduces GraphQL and its origin and announces the public release of the -GraphQL working draft specification and "GraphQL.js" a reference implementation. - - - -## Creating a GraphQL Server – React Europe - -*Nick Schrock, Dan Schafer – July 3, 2015* - -Nick and Dan expands on Lee's talk, explaining how to use GraphQL.js to build a -server and explain the merits of a strong type system. - - - -## Data fetching for React applications at Facebook – React.js Conf - -*Dan Schafer, Jing Chen – January 28, 2015* - -Dan introduces GraphQL, the data-fetching language used at Facebook. Jing -introduces Relay, an application framework using React and GraphQL. Both -technologies are being used at Facebook to build products and will soon -be open-sourced. - - diff --git a/site/docs/Walkthrough-Intro.md b/site/docs/Walkthrough-Intro.md deleted file mode 100644 index 09e6a115c0..0000000000 --- a/site/docs/Walkthrough-Intro.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Introduction -layout: ../_core/DocsLayout -category: Walkthrough -permalink: /docs/intro/ -next: /docs/todo/ ---- - -GraphQL consists of a type system, query language and execution semantics, -static validation, and type introspection, each outlined below. To guide you -through each of these components, we've written an example designed to -illustrate the various pieces of GraphQL. This example is included in the -[GraphQL.js](https://github.com/graphql/graphql-js) reference implementation -as a set of [end-to-end tests](https://github.com/graphql/graphql-js/tree/master/src/__tests__). - -This example is not comprehensive, but it is designed to quickly introduce -the core concepts of GraphQL, to provide some context before diving into -the more detailed specification or the [GraphQL.js](https://github.com/graphql/graphql-js) -reference implementation. - -The premise of the example is that we want to use GraphQL to query for -information about characters and locations in the original Star Wars -trilogy. diff --git a/site/docs/Walkthrough-Introspection.md b/site/docs/Walkthrough-Introspection.md deleted file mode 100644 index 71c6bdf22f..0000000000 --- a/site/docs/Walkthrough-Introspection.md +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Introspection -layout: ../_core/DocsLayout -category: Walkthrough -permalink: /docs/introspection/ -next: /docs/api-reference-graphql/ ---- - -It's often useful to ask a GraphQL schema for information about what -queries it supports. GraphQL allows us to do so using the introspection -system! - -For our Star Wars example, the file -[starWarsIntrospection-test.js](https://github.com/graphql/graphql-js/blob/master/src/__tests__/starWarsIntrospection-test.js) -contains a number of queries demonstrating the introspection system, and is a -test file that can be run to exercise the reference implementation's -introspection system. - -We designed the type system, so we know what types are available, but if -we didn't, we can ask GraphQL, by querying the `__schema` field, always -available on the root type of a Query. Let's do so now, and ask what types -are available. - - - -Wow, that's a lot of types! What are they? Let's group them: - - - **Query, Character, Human, Episode, Droid** - These are the ones that we -defined in our type system. - - **String, Boolean** - These are built-in scalars that the type system -provided. - - **__Schema, __Type, __TypeKind, __Field, __InputValue, __EnumValue, -__Directive** - These all are preceded with a double underscore, indicating -that they are part of the introspection system. - -Now, let's try and figure out a good place to start exploring what queries are -available. When we designed out type system, we specified what type all queries -would start at; let's ask the introspection system about that! - - - -And that matches what we said in the type system section, that -the `Query` type is where we will start! Note that the naming here -was just by convention; we could have named our `Query` type anything -else, and it still would have been returned here had we specified it -was the starting type for queries. Naming it `Query`, though, is a useful -convention. - -It is often useful to examine one specific type. Let's take a look at -the `Droid` type: - - - -What if we want to know more about Droid, though? For example, is it -an interface or an object? - - - -`kind` returns a `__TypeKind` enum, one of whose values is `OBJECT`. If -we asked about `Character` instead we'd find that it is an interface: - - - -It's useful for an object to know what fields are available, so let's -ask the introspection system about `Droid`: - - - -Those are our fields that we defined on `Droid`! - -`id` looks a bit weird there, it has no name for the type. That's -because it's a "wrapper" type of kind `NON_NULL`. If we queried for -`ofType` on that field's type, we would find the `String` type there, -telling us that this is a non-null String. - -Similarly, both `friends` and `appearsIn` have no name, since they are the -`LIST` wrapper type. We can query for `ofType` on those types, which will -tell us what these are lists of. - - - -Let's end with a feature of the introspection system particularly useful -for tooling; let's ask the system for documentation! - - - -So we can access the documentation about the type system using introspection, -and create documentation browsers, or rich IDE experiences. - -This has just scratched the surface of the introspection system; we can -query for enum values, what interfaces a type implements, and more. We -can even introspect on the introspection system itself. The specification goes -into more detail about this topic in the "Introspection" section, and the [introspection](https://github.com/graphql/graphql-js/blob/master/src/type/introspection.js) -file in GraphQL.js contains code implementing a specification-compliant GraphQL -query introspection system. diff --git a/site/docs/Walkthrough-Validation.md b/site/docs/Walkthrough-Validation.md deleted file mode 100644 index 918cc90b03..0000000000 --- a/site/docs/Walkthrough-Validation.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Validation -layout: ../_core/DocsLayout -category: Walkthrough -permalink: /docs/validation/ -next: /docs/introspection/ ---- - -By using the type system, it can be predetermined whether a GraphQL query -is valid or not. This allows servers and clients to effectively inform -developers when an invalid query has been created, without having to rely -on runtime checks. - -For our Star Wars example, the file -[starWarsValidation-test.js](https://github.com/graphql/graphql-js/blob/master/src/__tests__/starWarsValidation-test.js) -contains a number of queries demonstrating various invalidities, and is a test -file that can be run to exercise the reference implementation's validator. - -To start, let's take a complex valid query. This is a nested query, similar to -an example from the previous section, but with the duplicated fields factored -out into a fragment: - - - -And this query is valid. Let's take a look at some invalid queries... - -A fragment cannot refer to itself or create a cycle, as this could result in -an unbounded result! Here's the same query above but without the explicit three -levels of nesting: - - - -When we query for fields, we have to query for a field that exists on the -given type. So as `hero` returns a `Character`, we have to query for a field -on `Character`. That type does not have a `favoriteSpaceship` field, so this -query is invalid: - - - -Whenever we query for a field and it returns something other than a scalar -or an enum, we need to specify what data we want to get back from the field. -Hero returns a `Character`, and we've been requesting fields like `name` and -`appearsIn` on it; if we omit that, the query will not be valid: - - - -Similarly, if a field is a scalar, it doesn't make sense to query for -additional fields on it, and doing so will make the query invalid: - - - -Earlier, it was noted that a query can only query for fields on the type -in question; when we query for `hero` which returns a `Character`, we -can only query for fields that exist on `Character`. What happens if we -want to query for R2-D2s primary function, though? - - - -That query is invalid, because `primaryFunction` is not a field on `Character`. -We want some way of indicating that we wish to fetch `primaryFunction` if the -`Character` is a `Droid`, and to ignore that field otherwise. We can use -the fragments we introduced earlier to do this. By setting up a fragment defined -on `Droid` and including it, we ensure that we only query for `primaryFunction` -where it is defined. - - - -This query is valid, but it's a bit verbose; named fragments were valuable -above when we used them multiple times, but we're only using this one once. -Instead of using a named fragment, we can use an inline fragment; this -still allows us to indicate the type we are querying on, but without naming -a separate fragment: - - - -This has just scratched the surface of the validation system; there -are a number of validation rules in place to ensure that a GraphQL query -is semantically meaningful. The specification goes into more detail about this -topic in the "Validation" section, and the -[validation](https://github.com/graphql/graphql-js/blob/master/src/validation) -directory in GraphQL.js contains code implementing a -specification-compliant GraphQL validator. diff --git a/site/docs/getting-started/index.html b/site/docs/getting-started/index.html new file mode 100644 index 0000000000..532e30db1f --- /dev/null +++ b/site/docs/getting-started/index.html @@ -0,0 +1,14 @@ + + + + + + + GraphQL Page Redirection + + + If you are not redirected automatically, follow this link. + + diff --git a/site/docs/intro/index.html b/site/docs/intro/index.html new file mode 100644 index 0000000000..532e30db1f --- /dev/null +++ b/site/docs/intro/index.html @@ -0,0 +1,14 @@ + + + + + + + GraphQL Page Redirection + + + If you are not redirected automatically, follow this link. + + diff --git a/site/docs/introspection/index.html b/site/docs/introspection/index.html new file mode 100644 index 0000000000..532e30db1f --- /dev/null +++ b/site/docs/introspection/index.html @@ -0,0 +1,14 @@ + + + + + + + GraphQL Page Redirection + + + If you are not redirected automatically, follow this link. + + diff --git a/site/docs/queries/index.html b/site/docs/queries/index.html new file mode 100644 index 0000000000..532e30db1f --- /dev/null +++ b/site/docs/queries/index.html @@ -0,0 +1,14 @@ + + + + + + + GraphQL Page Redirection + + + If you are not redirected automatically, follow this link. + + diff --git a/site/docs/typesystem/index.html b/site/docs/typesystem/index.html new file mode 100644 index 0000000000..532e30db1f --- /dev/null +++ b/site/docs/typesystem/index.html @@ -0,0 +1,14 @@ + + + + + + + GraphQL Page Redirection + + + If you are not redirected automatically, follow this link. + + diff --git a/site/docs/validation/index.html b/site/docs/validation/index.html new file mode 100644 index 0000000000..532e30db1f --- /dev/null +++ b/site/docs/validation/index.html @@ -0,0 +1,14 @@ + + + + + + + GraphQL Page Redirection + + + If you are not redirected automatically, follow this link. + + diff --git a/site/docs/videos/index.html b/site/docs/videos/index.html new file mode 100644 index 0000000000..532e30db1f --- /dev/null +++ b/site/docs/videos/index.html @@ -0,0 +1,14 @@ + + + + + + + GraphQL Page Redirection + + + If you are not redirected automatically, follow this link. + + diff --git a/site/help/index.html b/site/help/index.html new file mode 100644 index 0000000000..532e30db1f --- /dev/null +++ b/site/help/index.html @@ -0,0 +1,14 @@ + + + + + + + GraphQL Page Redirection + + + If you are not redirected automatically, follow this link. + + diff --git a/site/help/index.html.js b/site/help/index.html.js deleted file mode 100644 index 970059365b..0000000000 --- a/site/help/index.html.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * Copyright (c) 2015, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the license found in the - * LICENSE file in the root directory of this source tree. - */ - -var React = require('react'); -var Site = require('../_core/Site'); -var center = require('../_core/center'); -var h2 = require('../_core/H2'); - -var Help = React.createClass({ - render: function() { - return ( - - -
-
-

Need help?

-

- GraphQL is worked on full-time by Facebook's product infrastructure engineering teams. They're often around and available for questions. -

- -

Slack

-

Many developers and users idle on Slack in #general on GraphQL. Get your invite here!

- -

Stack Overflow

-

Many members of the community use Stack Overflow to ask questions. Read through the existing questions tagged with graphql or ask your own!

- -

Twitter

-

#graphql hash tag on Twitter is used to keep up with the latest GraphQL news.

- -

#graphql Tweets

-