Finally, I have finished the demo in a short time, so as to learn the usage of graphQL, I don’t need to learn the usage and concepts. This project uses KOA + Apollo-server in the background, uses react (with hooks) in the foreground, originally planned to use MongoDB, but then simply read and write simulation data, and record it.

The background

  • Module is introduced into
const { ApolloServer, gql } = require('apollo-server-koa');
Copy the code
  • Define the type
const typeDefs = gql` type TodoItem { id: ID content: String! checked: Boolean } type Query { TodoList: [TodoItem!]  } type Mutation { createTodo(content: String! , checked: Boolean): [TodoItem!] ! updateTodo(content: String! , checked: Boolean, id:ID): [TodoItem!] ! , deleteTodo(id: ID): [TodoItem!] ! } `;
Copy the code
  • Define the resolver
const resolvers = {
  Query: {
    TodoList: async (parent, args, context, info) => {
      const data = await readFile('./mock/index.json');
      const todoList = JSON.parse(data);
      return todoList
    }
  },
  Mutation: {
    createTodo: async (_, { content, checked }) => {
      const data = await readFile('./mock/index.json');
      let todoList = JSON.parse(data);
      todoList = todoList.concat([{
        content,
        checked,
        id: Math.round(Math.random() * 10000)}]);const writeErr = await writeFile(
        './mock/index.json'.JSON.stringify(todoList)
      );
      return! writeErr && todoList } } }Copy the code
  • Start the server
const app = new Koa();

const server = new ApolloServer({
  typeDefs,
  resolvers
});

server.applyMiddleware({ app });
Copy the code

The front end

  • Entrance to the file
import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: 'http://localhost:3000/graphql',})const App = (a)= > (
  <ApolloProvider client={client}>/ / component</ApolloProvider>
);
Copy the code
  • query component
import { Query } from "react-apollo";
import gql from "graphql-tag";

const QUERY_TODO = gql` { TodoList{ content id checked } } `;

const TodoList = (a)= >( <Query query={QUERY_TODO} > {({ loading, error, data }) => { if (loading) return <p>loading... </p>; if (error) return <p>error... </p>; return ( <List dataSource={data.TodoList} itemLayout="vertical" renderItem={(item) => <TodoItem data={item}/>} /> ) }} </Query> );Copy the code
  • mutation component
import gql from "graphql-tag";
import { Mutation } from "react-apollo";

const ADD_TODO = gql` mutation createTodo($content:String! , $checked:Boolean){ createTodo(content: $content, checked: $checked){ content id checked } } `;
const QUERY_TODO = gql` { TodoList{ content id checked } } `;

export default() = > {return (
    <Mutation
      mutation={ADD_TODO}
      update={(cache, { data}) = >WriteQuery ({query: QUERY_TODO, data: {TodoList: data.createTodo}})}} > {(addTodo) => {return<AddTodo addTodo={addTodo} />
      }}
    </Mutation>)};Copy the code

The last

Beginner Graphql Series on YouTube, and finally code Warehouse