走在JS上的全栈之路(二)(1/2)

(这是一个系列文章:预计会有三期，第一期会以同构构建前后端应用为主，第二期会以 GraphQL 和 MySQL 为主，第三期会以 Docker 配合线上部署报警为主)

作者: 赵玮龙

重要声明: 从此不再以 AMC 团队名称发布文章，原因不详述，所有文章和后续文章将由个人维护，如果你对我的文章感兴趣，也请继续支持和关注，再次声明-个人还是会保持更新和最新以及前沿技术的踩坑，不仅仅局限于前端领域!

可能你也发现题目出现了1/2，因为如果介绍 GraphQL 和 MySQL 一起，容易忽略掉中间的很多细节过程，还有篇幅本身问题，我准备把他们拆开来说，我仔细想了下，我先从前端的角度看 GraphQL 如何耦合到我们的项目中，看看它能为我们带来什么并且解决了什么问题(虽然拆开说，篇幅还是非常长的，希望各位感兴趣的同学可以先点赞保存~~~慢慢看)，再然后我们看看 node 端如何从数据库层面支持 GraphQL，还是保留学习的心态~ 虚心向大家学习并且给自己的学习过程留下一些印记。

正片的分界线

什么是GraphQL，为什么我们会需要它

先来阐述下什么是GraphQL

A query language for your API GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

这是官网上对他的解释，一种专门为 API 设计的查询语言: 一种满足你已有数据查询需求的 runtime，没有冗余并且精确的查询你需要的数据，也能让 API 更易于维护和演进。

我仔细回想日常中开发遇到的那些觉得很麻烦的问题:

• 首先是每次开发需求开始状态都需要都 mock 的数据，根据后端提供的接口文档去生成自己的 mock 数据无论是公司已有的 mock server 工具还是自己的 mock server 或者是第三的 mock server 这让开发变得繁琐，原因是在开发中我需要不停的查询后端的接口文档制定自己的 mock 数据并且，联调中还要会因为字段等等与后端不一致再次更改。
• 每次请求资源的时候，经常会遇到各种串行·并行请求，核心原因可能是因为后端领域服务或者是数据库层面的原因，这样会导致我们在得到我们需求的资源过程变得非常复杂。
• 由于上面的问题或者哪怕是单个接口我们往往也需要把接口返回的数据 normalize 化，当然就算你不 normalize 也需要处理返回数据拿到你真正映射到 UI 的 data。(后端返回数据往往不是我们真正想要的，或者说不是全部我们都需要的。)
• 根据 RESTful 请求也就意味着我们需要很多接口，或者说是起很多接口名称定位资源并且资源定位未必准确，这样不仅仅浪费IO次数也会产生很多其实没必要的网络请求。

当然基于上面的问题我也知道现在各个公司本身也有自己 BFF 方案，针对前端做一定的优化。确实解决了上面一些问题。但是再后退一步说如果就 RESTful 本身的问题来思考的化，其实 GraphQL 解决的就是 RESTful 本身解决不了的问题。 我们都知道:

REST -> Representational State Transfer Resources 意味着单一资源无论是一张图片一个文件等等对应唯一的资源定位符

那么问题其实就在这里，往往随着现在前端界面的复杂化，我们需要的资源往往不是单一资源了。那么这种架构本身也确实会有它的短板。

对比之下我们看看为什么可能会需要GraphQL

先明确一个概念GraphQL是基于SDL -> Schema Definition Language 熟悉数据库的同学可能对于schema概念比较熟悉，其实我们也可以根据这个名称去思考它本身Graph(图)，图的概念本身就是你的data树形结构。

我们看一下官网首页的例子:

# 你的请求资源可能涵盖之前RESTful的许多个接口或者是一个特别大的json数据
# 你可能在怀疑那如果RESTful一个接口也能返回下面的数据岂不是也很完美，没错可是如果我跟你说我可能需要的homeWorld 里的数据是特定的name 和climate呢?我们还需要去url上传参数，并且实际情况是后端往往觉得这样的东西我返回给你全部，你自己去拿就好啦。
{
  hero {
    name
    friends {
      name
      homeWorld {
        name
        climate
      }
      species {
        name
        lifespan
        origin {
          name
        }
      }
    }
  }
}

# 对应的schema

type Query {
  hero: Character
}

type Character {
  name: String
  friends: [Character]
  homeWorld: Planet
  species: Species
}

type Planet {
  name: String
  climate: String
}

type Species {
  name: String
  lifespan: Int
  origin: Planet
}

针对于拿特定数据这个问题为了更好的 (data=>UI)，我看到一篇文章说代替之前 redux 的使用经验特别的好推荐给大家。

我一直觉得这个对话框特别的有说服力:

// apollo模块替代redux
import { ApolloProvider, getDataFromTree } from 'react-apollo';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { SchemaLink } from 'apollo-link-schema';
import { ApolloClient } from 'apollo-client';

// apollo grahql操作模块
import { makeExecutableSchema } from 'graphql-tools';
import { graphqlKoa } from 'apollo-server-koa';

// redux
// const { Provider } = require('react-redux');
// const getStore = require('../common/store').default;

// api前缀
const apiPrefix = '/api';

// 引入schema
let typeDefs;
const pathName = './server/schema.graphql';

if (typeof pathName === 'string' && pathName.endsWith('graphql')) {
  const schemaPath = path.resolve(pathName);
  typeDefs = importSchema(schemaPath);
};

// resolvers
let links = [{
  id: 'link-0',
  url: 'www.howtographql.com',
  description: 'Love GraphQL'
},
{
  id: 'link-002',
  url: 'www.howtographql.com',
  description: 'Love GraphQL'
}];

let idCount = links.length;

const resolvers = {
  Query: {
    info: () => `respect all, fear none!`,
    feed: () => links,
    name: () =>  `赵玮龙`,
    age: () =>  29
  },
  Mutation: {
    post: (root, args) => {
      const link = {
        id: `link-${idCount++}`,
        description: args.description,
        url: args.url,
      }
      links.push(link)
      return link
    },
    deleteLink: (root, args) => {
      return links.filter(item => item.id !== args.id)
    }
  }
}

// 生成schema
const schema = makeExecutableSchema({
  typeDefs,
  resolvers
})

// 路由
module.exports = function(app, options={}) {
  // 页面router设置
  app.get(`${staticPrefix}/*`, async (ctx, next) => {
    // graphql接口设置
    const client = new ApolloClient({
      link: new SchemaLink({ schema }),
      ssrMode: true,
      connectToDevTools: true,
      cache: new InMemoryCache(),
    })

    const helmet = Helmet.renderStatic();
    const context = {};
    options.title = helmet.title;

    // restful api redux数据源
    // const store = getStore();
    // const promises = routes.map(
    //   route => {
    //     const match = matchPath(ctx.path, route);
    //     if (match) {
    //       let serverFetch = route.component.loadData
    //       return serverFetch(store.dispatch)
    //     }
    //   }
    // )

    // const serverStream = await Promise.all(promises)
    // .then(
    //   () => {
    //     return ReactDOMServer.renderToNodeStream(
    //       <Provider store={store}>
    //         <StaticRouter
    //           location={ctx.url}
    //           context={context}
    //           >
    //           <App/>
    //         </StaticRouter>
    //       </Provider>
    //     );
    //   }
    // );

    // graphql提取数据并且渲染dom
    const Html = (
      <ApolloProvider client={client}>
        <StaticRouter
          location={ctx.url}
          context={context}
          >
          <App/>
        </StaticRouter>
      </ApolloProvider>
    );
    const serverStream = await getDataFromTree(Html).then(() => ReactDOMServer.renderToNodeStream(Html));
    // console.log(serverStream.readable);
    await streamToPromise(serverStream).then(
      (data) => {
        options.body = data.toString();
        if (context.status === 301 && context.url) {
          ctx.status = 301;
          ctx.redirect(context.url);
          return ;
        }
        // 把store.getState()替换成client.extract()
        if (context.status === 404) {
          ctx.status = 404;
          ctx.body = renderFullPage(options, client.extract());
          return ;
        }
        ctx.status = 200;
        ctx.set({
          'Content-Type': 'text/html; charset=utf-8'
        });
        ctx.body = renderFullPage(options, client.extract());
    })
    // console.log(serverStream instanceof Stream);
    await next();
  });

  // api路由
  // app.get(`${apiPrefix}/user/info`, async(ctx, next) => {
  //   ctx.body = {
  //     code: 10000,
  //     msg: '',
  //     data: {
  //       name: '赵玮龙',
  //       age: 29,
  //     }
  //   }
  //   await next();
  // });
  //
  // app.get(`${apiPrefix}/home/info`, async(ctx, next) => {
  //   ctx.body = {
  //     code: 10000,
  //     msg: '',
  //     data: {
  //       title: '你要的网站',
  //       content: '那些年我想过的女孩~',
  //     }
  //   }
  //   await next();
  // });

  // 设置调试GraphQL-playground
  app.all('/graphql/playground', koaPlayground({
      endpoint: '/graphql',
    })
  );

  // GraphQl api
  app.all('/graphql', graphqlKoa({ schema }));
}

先来看下路由方面我们声明了两个路由:

• /graphql(用于请求数据的接口)
• /graphql/playground(graphql实现请求界面)

// 我们新建一个todoForm 的文件写我们的todoList组件
import React from 'react';
import { graphql, compose } from 'react-apollo';
import { withState } from 'recompose';
import {
  addTodoMutation,
  clearTodoMutation,
  todoQuery,
} from '../../client/queries';

const TodoForm = ({
  currentTodos,
  addTodoMutation,
  clearTodoMutation,
  inputText,
  handleText,
}) => (
  <div>
    <input
      value={inputText}
      onChange={(e) => handleText(e.target.value)}
      />
    <ul>
    {
      currentTodos.map((item, index) => (<li key={index}>{item}</li>))
    }
    </ul>
    <button 
      onClick={() => {
        addTodoMutation({ variables: { item: inputText } })
        handleText('')
    }}>
      Add
    </button>
    <button 
      onClick={(e) => clearTodoMutation()}
    >
      clearAll
    </button>
  </div>
)

const maptodoQueryProps = {
  props: ({ ownProps, data: { currentTodos = [] } }) => ({
    ...ownProps,
    currentTodos,
  }),
};

export default compose(
  graphql(todoQuery, maptodoQueryProps),
  graphql(addTodoMutation, { name: 'addTodoMutation' }),
  graphql(clearTodoMutation, { name: 'clearTodoMutation' }),
  withState('inputText', 'handleText', ''),
)(TodoForm)

// queries.js
import gql from 'graphql-tag';

// 这里的@写法是directives,可以查看上面的官方文档
const todoQuery = gql`
  query GetTodo {
    currentTodos @client
  }
`;

const clearTodoMutation = gql`
  mutation ClearTodo {
    clearTodo @client
  }
`;

const addTodoMutation = gql`
  mutation addTodo($item: String) {
    addTodo(item: $item) @client
  }
`;

export {
  todoQuery,
  clearTodoMutation,
  addTodoMutation,
}