GraphQL在react中的应用示例详解

type Character {
    name: String!
    list: [Episode!]!
}

myField: [String!]
myField: null 
myField: [] 
myField: ['a', 'b'] 
myField: ['a', null, 'b'] 
myField: [String]!
myField: null
myField: []
myField: ['a', 'b'] 
myField: ['a', null, 'b']

type Starship {
    id: ID!
    name: String!
    length(unit: LengthUnit = METER): Float
}

enum Episode {
    NEWHOPE
    EMPIRE
    JEDI
}

type Character {
    name: String!
    list: [Episode]!
}

query {
    search {
        actors @include(if: $queryActor) {
            name
        }
    }
}

query {
    search {
        comments @skip(if: $noComments) {
            from
        }
    }
}

query Hero($episode: Int!, $withFriends: Boolean!) {
    hero(episode: $episode) {
        name
        friends @include(if: $withFriends) {
        name
        }
    }
}

export const TokenKind = Object.freeze({
    BANG: '!',
    DOLLAR: '$',
    PAREN_L: '(',
    PAREN_R: ')',
    SPREAD: '...',
    COLON: ':',
    EQUALS: '=',
    BRACKET_L: '[',
    BRACKET_R: ']',
    ...
});

export const Kind = Object.freeze({
    // Name
    NAME: 'Name',
    // Document
    DOCUMENT: 'Document',
    OPERATION_DEFINITION: 'OperationDefinition',
    VARIABLE_DEFINITION: 'VariableDefinition',
    VARIABLE: 'Variable',
    // Values
    INT: 'IntValue',
    FLOAT: 'FloatValue',
    STRING: 'StringValue',
    BOOLEAN: 'BooleanValue',
    ...
});

{
    "errors":[
        {
            "message":"Cannot query field "getU" on type "Query". Did you mean "getUser"?",
            "locations":[
                {
                    "line":3,
                    "column":9
                }
            ]
        }
    ]
}

import express from 'express';
import { graphiqlExpress, graphqlExpress } from 'apollo-server-express';
const app = express();
app.use('/graphql', graphqlExpress({
    schema,
}));
app.use('/graphiql', graphiqlExpress({
    endpointURL: '/graphql'
}));

import ApolloClient from "apollo-boost";
const client = new ApolloClient({
  uri: "https://48p1r2roz4.sse.codesandbox.io"
});

import gql from "graphql-tag";
...
client.query({
    query: gql`
      {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));

import React from "react";
import { render } from "react-dom";
import { ApolloProvider } from "react-apollo";
const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h3>My first Apollo app 🚀</h3>
    </div>
  </ApolloProvider>
);
render(<App />, document.getElementById("root"));

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
export const USERS_QUERY = gql`
  query UserQuery($pageNum: Int,$pageSize:Int){
    users(pageNum:$pageNum,pageSize:$pageSize ) {
      pageNum
      pageSize
      total
      data {
        userName
      }
    }
  }
`;
const withQuery = graphql(USERS_QUERY, {
  options: () => ({
    variables: {
      pageNum: 3,
      pageSize: 8,
    },
  }),
});
class List extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const { data: { loading, error, users } } = this.props;
    if (loading) {
      return <div className="loading">Loading...</div>;
    }
    if (error) return `Error! ${error.message}`;
    const { total } = users;
    };
    return (
        <div>
            <p className="total">总共<span>{total}</span>人</p>
        </div>
    );
  }
}
export default withQuery(List);

import React, { Component } from 'react';
import { ApolloConsumer } from 'react-apollo';
class DelayedQuery extends Component {
  state = { dog: null };
  onDogFetched = dog => this.setState(() => ({ dog }));
  render() {
    return (
      <ApolloConsumer>
        {client => (
          <div>
            {this.state.dog && <img src={this.state.dog.displayImage} />}
            <button
              onClick={async () => {
                const { data } = await client.query({
                  query: GET_DOG_PHOTO,
                  variables: { breed: "bulldog" }
                });
                this.onDogFetched(data.dog);
              }}
            >
              Click me!
            </button>
          </div>
        )}
      </ApolloConsumer>
    );
  }
}

import gql from "graphql-tag";
import { Query } from "react-apollo";
const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;
const DogPhoto = ({ breed }) => (
  <Query query={GET_DOG_PHOTO} variables={{ breed }} pollInterval={500}>
    {({ loading, error, data, startPolling, stopPolling }) => {
      if (loading) return null;
      if (error) return `Error!: ${error}`;
      return (
        <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      );
    }}
  </Query>
);

import { ApolloClient } from 'apollo-client'
import { withClientState } from 'apollo-link-state'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { resolvers, typeDefs, defaults } from '../client/index'
const cache = new InMemoryCache()
const client = new ApolloClient({
  cache, // 本地数据存储
  link: withClientState({ resolvers, defaults, cache, typeDefs }).concat(
    new HttpLink({
      uri: 'http://localhost:4001/graphql',
      opts: {
        credentials: 'cross-origin',
      },
    })
  ),
})