xyz-data / graphql-js

A reference implementation of GraphQL for JavaScript
http://graphql.org/graphql-js/
Other
1 stars 0 forks source link

GraphQL & shit website! #1

Open xgqfrms-GitHub opened 7 years ago

xgqfrms-GitHub commented 7 years ago

http://graphql.org/learn/

http://graphql.org/code/#javascript


$ npm i -D graphql

$ npm i -S graphql

Then run node hello.js with this code in hello.js:


/*

var {graphql, buildSchema} = require('graphql');

var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

var root = {
    hello: () => 'Hello world!'
};

graphql(schema, '{ hello }', root)
.then((response) => {
    console.log(response);
    // {data: { hello: 'Hello world!' }}
});

*/

import {graphql, buildSchema} from 'graphql';
const schema = buildSchema(`
    type Query {
        hello: String
    }
`);

const root = {
    hello: () => 'Hello world!'
};

graphql(schema, '{ hello }', root)
.then((response) => {
    console.log(response);
    // ???
});

http://graphql.org/code/#express-graphql-graphql-js-running-an-express-graphql-server-github-https-github-com-graphql-express-graphql-npm-https-www-npmjs-com-package-express-graphql


$ npm i -D express express-graphql graphql

$ npm i -S express express-graphql graphql

Then run node server.js with this code in server.js:


/* 

var express = require('express');
var graphqlHTTP = require('express-graphql');
var {buildSchema} = require('graphql');

var schema = buildSchema(`
    type Query {
        hello: String
    }
`);

var root = {
    hello: () => 'Hello world!'
};

var app = express();
app.use('/graphql', graphqlHTTP({schema: schema, rootValue: root, graphiql: true}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

*/

import {express} from 'express';
import graphqlHTTP from 'express-graphql';
import {buildSchema} from 'graphql';

const schema = buildSchema(`
    type Query {
        hello: String
    }
`);

const root = {
    hello: () => 'Hello world!'
};

const app = express();
app.use(
    '/graphql', 
    graphqlHTTP(
        {
            schema: schema,
            rootValue: root,
            graphiql: true
        }
    )
);
app.listen(
    4000,
    () => {
        return console.log('Now browse to localhost:4000/graphql');
    }
);

https://github.com/apollographql/apollo-server

http://dev.apollodata.com/tools/apollo-server/index.html


$ npm i -D graphql-server-express body-parser express graphql graphql-tools

$ npm i -S graphql-server-express body-parser express graphql graphql-tools

http://graphql.org/code/#graphql-server-http-dev-apollodata-com-tools-graphql-server-index-html-github-https-github-com-apollostack-graphql-server-npm-https-www-npmjs-com-package-graphql-server-express

Then run node server.js with this code in server.js:


/*

var express = require('express');
var bodyParser = require('body-parser');
var {graphqlExpress, graphiqlExpress} = require('graphql-server-express');
var {makeExecutableSchema} = require('graphql-tools');

var typeDefs = [`
type Query {
  hello: String
}

schema {
  query: Query
}`];

var resolvers = {
    Query: {
        hello(root) {
            return 'world';
        }
    }
};

var schema = makeExecutableSchema({typeDefs, resolvers});
var app = express();
app.use('/graphql', bodyParser.json(), graphqlExpress({schema}));
app.use('/graphiql', graphiqlExpress({endpointURL: '/graphql'}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphiql'));

*/

import {express} from 'express';
import bodyParser from 'body-parser';
import {graphqlExpress, graphiqlExpress} from 'graphql-server-express';
import {makeExecutableSchema} from 'graphql-tools';

const typeDefs = [`
    type Query {
        hello: String
    }
    schema {
        query: Query
    }
`];

const resolvers = {
    Query: {
        hello(root) {
            return 'world';
        }
    }
};

const schema = makeExecutableSchema(
    {
        typeDefs,
        resolvers
    }
);

const app = express();

app.use(
    '/graphql',
    bodyParser.json(),
    graphqlExpress({schema})
);

app.use(
    '/graphiql',
    graphiqlExpress({endpointURL: '/graphql'})
);

app.listen(
    4000, () => {
        return console.log('Now browse to localhost:4000/graphiql');
    }
);

https://www.howtographql.com/

xgqfrms-GitHub commented 7 years ago

https://app.pluralsight.com/player?course=graphql-scalable-apis&author=samer-buna&name=graphql-scalable-apis-m1&clip=0&mode=live

https://github.com/gildata/graphql-js/tree/master/Tutorials/Demos

result

image

babel ???

webpack

image

xgqfrms-GitHub commented 7 years ago

JavaScript & React & GraphQL

http://graphql.org/code/#javascript-1

Relay

https://facebook.github.io/relay/

https://facebook.github.io/relay/docs/getting-started.html

https://github.com/facebook/relay

https://github.com/gildata/relay

xgqfrms-GitHub commented 7 years ago

http://graphql.org/code/#java


import graphql.ExecutionResult;
import graphql.GraphQL;
import graphql.schema.GraphQLSchema;
import graphql.schema.StaticDataFetcher;
import graphql.schema.idl.RuntimeWiring;
import graphql.schema.idl.SchemaGenerator;
import graphql.schema.idl.SchemaParser;
import graphql.schema.idl.TypeDefinitionRegistry;

import static graphql.schema.idl.RuntimeWiring.newRuntimeWiring;

public class HelloWorld {

    public static void main(String[] args) {
        String schema = "type Query{hello: String} schema{query: Query}";

        SchemaParser schemaParser = new SchemaParser();
        TypeDefinitionRegistry typeDefinitionRegistry = schemaParser.parse(schema);

        RuntimeWiring runtimeWiring = newRuntimeWiring()
                .type("Query", builder -> builder.dataFetcher("hello", new StaticDataFetcher("world")))
                .build();

        SchemaGenerator schemaGenerator = new SchemaGenerator();
        GraphQLSchema graphQLSchema = schemaGenerator.makeExecutableSchema(typeDefinitionRegistry, runtimeWiring);

        GraphQL build = GraphQL.newGraphQL(graphQLSchema).build();
        ExecutionResult executionResult = build.execute("{hello}");

        System.out.println(executionResult.getData().toString());
        // Prints: {hello=world}
    }
}

https://github.com/graphql-java/graphql-java

xgqfrms-GitHub commented 7 years ago

https://www.youtube.com/watch?v=9sc8Pyc51uU

https://youtu.be/UBGzsb2UkeY

14425396_10101172984157189_363499967115738889_o

http://graphql.org/blog/

https://gist.github.com/adrianodennanni/c2f0375c11353a0a789425e1be7fb9ba


/*

$ npm i -S graphql

*/

import { GraphQLSchema } from 'graphql';

export default new GraphQLSchema({
    query: QueryType,
});

import {
    GraphQLList,
    GraphQLObjectType,
    GraphQLString,
} from 'graphql';

const QueryType = new GraphQLObjectType({
    name: 'Query',
    description: 'The root of all... queries',
    fields: () => (
        {
            allPeople: {
                type: new GraphQLList(PersonType),
                resolve: root => {
                    // Fetch the index of people from the REST API
                },
            },
            person: {
                type: PersonType,
                args: {
                    id: {
                        type: GraphQLString
                    }
                },
                resolve: (root, args) => {
                    // Fetch the person with ID `args.id`
                },
            }
        }
    )
});

import {
    GraphQLList,
    GraphQLObjectType,
    GraphQLString,
} from 'graphql';

const PersonType = new GraphQLObjectType({
    name: 'Person',
    description: 'Somebody that you used to know',
    fields: () => (
        {
            firstName: {
                type: GraphQLString,
                resolve: person => person.first_name
            },
            lastName: {
                type: GraphQLString,
                resolve: person => person.last_name
            },
            email: {
                type: GraphQLString
            },
            id: {
                type: GraphQLString
            },
            username: {
                type: GraphQLString
            },
            friends: {
                type: new GraphQLList(PersonType),
                resolve: person => {
                    // Fetch the friends with the URLs `person.friends`
                }
            }
        }
    )
});