Graphql

apollo-boost 包含启动阿波罗客户端的所有依赖
react-apollo 视图层面的集合
graph-tag 解析查询语句
graphql 也是解析查询语句

import ApolloClient from 'apollo-boost' 

const client = new ApolloClient({
    uri: 'http://localhost:5000/graphql'
})

import { ApolloProvider,Query } from 'react-apollo'
import { Mutation,MutationFunc } from 'react-apollo'

# installing the preset package 
npm install apollo-boost graphql-tag graphql --save

# installing each piece independently 
npm install apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql --save

import ApolloClient from 'apollo-boost';
 
const client = new ApolloClient();

import React, { ReactElement } from 'react';
import {useQuery, gql } from '@apollo/client';

const GET_AUTHOR = gql`
	query Author($id: Int!) {
		author(id: $id) {
			id
			firstName
			lastName
			posts {
				title
				author
			}
		}
	}
`

export default function Home({}): ReactElement {
  const {data, loading, refetch } = useQuery(GET_AUTHOR, { variables: {id: 1}});
  return (
  	<div>home</div>
  )
}

import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';

// Create an http link:
const httpLink = new HttpLink({
  uri: 'http://localhost:3000/graphql'
});

// Create a WebSocket link:
const wsLink = new WebSocketLink({
  uri: `ws://localhost:5000/`,
  options: {
    reconnect: true
  }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

npm add graphql-request grapghql

import { request, gql } from 'graphql-request'

const query = gql`
  {
    company {
      ceo
    }
    roadster {
      apoapsis_au
    }
  }
`

request('https://api.spacex.land/graphql/', query).then((data) => console.log(data))

import { request, GraphQLClient } from 'graphql-request'

// Run GraphQL queries/mutations using a static function
request(endpoint, query, variables).then((data) => console.log(data))

// ... or create a GraphQL client instance to send requests
const client = new GraphQLClient(endpoint, { headers: {} })
client.request(query, variables).then((data) => console.log(data))

yarn add graphql
yarn add -D @graphql-codegen/cli

yarn add @graphql-codegen/typescript-react-apollo
yarn add @graphql-codegen/typescript
yarn add @graphql-codegen/typescript-operations

mutation CreateAuthor($author: authorInput) {
	createAuthor(author: $author)
}

query Author($id: Int!) {
	author(id: $id) {
		id
		firstName
		lastName
		posts {
			title
			author
		}
	}
}

overwrite: trues
schema: ./schema.gql
documents: 'scr/**/*.graphql'
generates:
	src/generated/graphql.tsx:
		plugins:
			- 'typescript'
			- 'typescript-operations'
			- 'typescript-react-apollo'
		hooks:
			afterOneFileWrite:
				- prettier --write
	schema.graphql:
		plugins:
			- 'schema-ast'
		hooks:
			 afterOneFileWrite:
				- prettier --write

{
  "scripts": {
    "codegen": "graphql-codegen"
  },
}

npm install apollo-upload-client

import { gql, useMutation } from "@apollo/client";

const MUTATION = gql`
  mutation ($file: Upload!) {
    uploadFile(file: $file) {
      success
    }
  }
`;

function UploadFile() {
  const [mutate] = useMutation(MUTATION);

  function onChange({
    target: {
      validity,
      files: [file],
    },
  }) {
    if (validity.valid) mutate({ variables: { file } });
  }

  return <input type="file" required onChange={onChange} />;
}

import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

const wsLink = new GraphQLWsLink(createClient({
  url: 'ws://localhost:4000/subscriptions',
  connectionParams: {
    authToken: user.authToken,
  },
}));

import { ApolloProvider } from 'react-apollo';
import { ApolloLink } from 'apollo-link';
import ApolloClient from 'apollo-client';

const App = () => {
  client = new ApolloClient({
      link: ApolloLink.from([onError(() => {}), new SchemaLink({ schema })]),
      cache: cache || globalCache || new InMemoryCache(),
    });
  
	return <ApolloProvider client={client}>
    {children}
  </ApolloProvider>;
}

yarn add urql
# or
npm install --save urql

import { Client, Provider, cacheExchange, fetchExchange } from 'urql';

const client = new Client({
  url: 'http://localhost:3000/graphql',
  exchanges: [cacheExchange, fetchExchange],
});

const App = () => (
  <Provider value={client}>
    <YourRoutes />
  </Provider>
);

import { gql, useQuery } from 'urql';

const TodosQuery = gql`
  query {
    todos {
      id
      title
    }
  }
`;

const Todos = () => {
  const [result, reexecuteQuery] = useQuery({
    query: TodosQuery,
  });

  const { data, fetching, error } = result;

  if (fetching) return <p>Loading...</p>;
  if (error) return <p>Oh no... {error.message}</p>;

  return (
    <ul>
      {data.todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

npm install gql.tada
npm install --save-dev @0no-co/graphqlsp

{
  "compilerOptions": {
    "strict": true,
    "plugins": [
      {
        "name": "@0no-co/graphqlsp",
        "schema": "./schema.graphql",
        "tadaOutputLocation": "./src/graphql-env.d.ts"
      }
    ]
  }
}

import { graphql } from 'gql.tada';

const TodosQuery = graphql(`
  query Todos ($limit: Int = 10) {
    todos(limit: $limit) {
      id
      title
      completed
    }
  }
`);

npm install apollo-server@2.13.1 graphql@14.6.0  type-graphql@0.17.6

import "reflect-metadata"
import {buildSchema,ObjectType,Field,ID,Resolver,Query} from "type-graphql";
import {ApolloServer} from "apollo-server";

@ObjectType()
class Post{
    @Field(type => ID)
    id: string;

    @Field()
    created: Data;

    @Field()
    content: String;
}

@Resolver(Post)
class PostResolver {
    @Query(returns => [Post])
    async posts(): Promise<Post[]>{
        return [
           {
              id:"0",
              created: new Date(),
              content:'aaa'
            },
            {
              id:"1",
              created: new Date(),
              content:'bbb'
            },
            {
              id:"2",
              created: new Date(),
              content:'ccc'
            },
        ]
    }
}

pnpm add graphql-yoga graphql

import { createSchema, createYoga } from 'graphql-yoga'
import { createServer } from 'node:http'

const yoga = createYoga({
  schema: createSchema({
    typeDefs: `
      type Query {
        hello: String
      }
    `,
    resolvers: {
      Query: {
        hello: () => 'Hello from Yoga!'
      }
    }
  })
})

const server = createServer(yoga)

server.listen(4000, () => {
  console.info('Server is running on http://localhost:4000/graphql')
})

npm install nexus graphql

import { queryType, stringArg, makeSchema } from 'nexus'
import { GraphQLServer } from 'graphql-yoga'

const Query = queryType({
  definition(t) {
    t.string('hello', {
      args: { name: stringArg() },
      resolve: (parent, { name }) => `Hello ${name || 'World'}!`,
    })
  },
})

const schema = makeSchema({
  types: [Query],
  outputs: {
    schema: __dirname + '/generated/schema.graphql',
    typegen: __dirname + '/generated/typings.ts',
  },
})

const server = new GraphQLServer({
  schema,
})

server.start(() => `Server is running on http://localhost:4000`)

npm add nexus-prisma nexus graphql @prisma/client

import { User } from 'nexus-prisma'
import { makeSchema, objectType } from 'nexus'
 
export const schema = makeSchema({
  types: [
    objectType({
      name: User.$name
      description: User.$description
      definition(t) {
        t.field(User.id)
     // t.field(User.id.name, User.id)    <-- For nexus@=<1.0 users
      }
    })
  ]
})

npm install graphql-upload graphql

import graphqlUploadKoa from "graphql-upload";

app.use(
  graphqlUploadKoa({
    // Limits here should be stricter than config for surrounding infrastructure
    // such as NGINX so errors can be handled elegantly by `graphql-upload`.
    maxFileSize: 10000000, // 10 MB
    maxFiles: 20,
  })
);

npm install graphql-subscriptions graphql

import { PubSub } from 'graphql-subscriptions';

export const pubsub = new PubSub();

const SOMETHING_CHANGED_TOPIC = 'something_changed';

export const resolvers = {
  Subscription: {
    somethingChanged: {
      subscribe: () => pubsub.asyncIterator(SOMETHING_CHANGED_TOPIC),
    },
  },
}

pubsub.publish(SOMETHING_CHANGED_TOPIC, { somethingChanged: { id: "123" }});

import { shield, rule, allow } from 'graphql-shield';

const isAuthenticated = rule()((parent, args, ctx) => {
  if (ctx.userId) {
    return true;
  }
  return new ServerError({
    code: ServerErrorCode.LOGIN_FAILED,
    msg: `no user matched`,
  });
});

const authMiddleware = shield({
  Query: {
    users: allow,
  },
  Mutation: {
    admin: allow
  },
});

npm install graphql-depth-limit

import depthLimit from 'graphql-depth-limit'
import express from 'express'
import graphqlHTTP from 'express-graphql'
import schema from './schema'
 
const app = express()
 
app.use('/graphql', graphqlHTTP((req, res) => ({
  schema,
  validationRules: [ depthLimit(10) ]
})))

npm install -g graphqurl

gq https://my-graphql-endpoint/graphql \
     -H 'Authorization: Bearer <token>' \
     -q 'query { table { column } }'

yarn add sofa-api
# or
npm install sofa-api

import { useSofa } from 'sofa-api';
import express from 'express';

const app = express();

app.use(
  '/api',
  useSofa({
    basePath: '/api',
    schema,
  })
);

// GET /api/users
// GET /api/messages

npx postgraphile -c 'postgres://user:pass@localhost/mydb' --watch --enhance-graphiql --dynamic-json