用apollo GraphQL + React + Koa 写一个todo

赵智
2023-12-01

总算,间间断断的把这个demo写完了,算是学习一下graphql的用法,也先不去深入学习了,主要是了解用法以及概念。这个项目后台使用koa + apollo-server,前台用的react(带hooks的版本),原先打算用MongoDB,后来干脆直接读写模拟数据了,然后记录下,看看怎么写吧。

后台

  • 模块引入
const { ApolloServer, gql } = require('apollo-server-koa');
复制代码
  • 定义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!]!
  }
`;
复制代码
  • 定义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
    }
  }
}
复制代码
  • 启动server
const app = new Koa();

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

server.applyMiddleware({ app });
复制代码

前端

  • 入口文件
import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost";

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

const App = () => (
  <ApolloProvider client={client}>
    // 组件
  </ApolloProvider>
);
复制代码
  • query component
import { Query } from "react-apollo";
import gql from "graphql-tag";

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

const TodoList = () => (
  <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>
);
复制代码
  • 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 }) => {
        // 新增后修改缓存
        cache.writeQuery({
          query: QUERY_TODO,
          data: {
            TodoList: data.createTodo
          }
        })
      }}
    >
      {(addTodo) => {
        return <AddTodo addTodo={addTodo} />
      }}
    </Mutation>
  )
};
复制代码

最后

详细的介绍不太多,推荐大家看一下YouTube上的一套视频,Beginner Graphql Series,最后代码仓库

 类似资料: