meteor 为基础,联合 Apollo + React + React-Router
Graphql with Apollo, Meteor and React:
https://janikvonrotz.ch/2016/10/09/graphql-with-apollo-meteor-and-react/
源代码:https://github.com/janikvonrotz/apometact/blob/master/client/ui/MainLayout.js
======客户端部分
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { Router, Route, Link, browserHistory } from 'react-router'
import { MainLayout, CategoryList, CategoryEdit, DealList, DealEdit, NotFound, Dashboard } from './ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
const networkInterface = createNetworkInterface(`/graphql`);
const client = new ApolloClient({
networkInterface
});
injectTapEventPlugin();
Meteor.startup(() => {
render(<ApolloProvider client={client}>
<Router history={browserHistory}>
<Route component={MainLayout}>
<Route path="/" component={Dashboard}/>
<Route path="/categories" component={CategoryList}/>
<Route path="/category/:id/edit" component={CategoryEdit}/>
<Route path="/deals" component={DealList}/>
<Route path="/deal/:id/edit" component={DealEdit}/>
<Route path="*" component={NotFound}/>
</Route>
</Router>
</ApolloProvider>, document.getElementById('render-target'));
});
meteor 为基础,联合 Apollo + React + React-Router的更多相关文章
- ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例
工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
- Nginx支持 React browser router
修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
- react 装 router - yarn add react-router-dom@next
react 装 router yarn add react-router-dom@next
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- react react使用css
在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表-b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...
随机推荐
- 关于hibernate纯sql查询返回结果集的问题(hbm.xml中不写多表关联)
相信用过hibernate的兄弟们都会因为多表复杂查询后,为返回的结果如何组装到一个VO中而烦恼不已.我也不停的为此而烦恼,但是在看了hibernate的transform后,感觉这个方法还挺管用的. ...
- svn branch and merge(svn切换分支和合并)详解
下文的实践主要是参考了TortoiseSVN的帮助文档和Subversion的在线文档,Subversion的在线文档:http://svnbook.red-bean.com/en/1.5/svn-b ...
- logrotate关于日志轮询和分割
如果你的是源码包安装的服务,那么对于Linux服务器上的一些服务在运行当中产生的日志很重要,可以判断你的服务是否有异常等,但源码包安装的日志是没有日志的轮询或者说是切割能力的, 所以你就需要用到bas ...
- gflags
一.安装配置 下载地址: https://code.google.com/p/gflags/downloads/list 解压安装: tar zxvf gflags-2.0.tar.gz && ...
- [译]git fetch
git fetch从远程仓储导入commit到你的本地仓储. 这些fetch到的commit是做为一个远程分支存储在你本地的. 这样你可以在集成这些commit到你的项目前先看看都有些什么修改. 用法 ...
- java 读取pdf、word、Excel文件
用到的jar: itextpdf-5.5.8.jar (PDF) poi.jar public class FileUtils { /** * 判断文件是否存在 * * @Title: isExc ...
- 大数据——sparksql
sparksql:http://www.cnblogs.com/shishanyuan/p/4723604.html?utm_source=tuicool spark on yarn :http:// ...
- JAVA 笔记
一.Java基础以及面向对象编程1.float类型的数自动转换成double类型时,可能会出现前后不相等的情况,因为有些数不能够用有限的二进制位精确表示.2.右移>>右移,左边空出位以符号 ...
- Inno Setup制作应用程序安装包
我最近写了一个MFC应用程序,想发给其他的小伙伴玩一玩,直接发了个exe文件过去,结果发现小伙伴那边打不开.原来这个exe文件虽然是MFC静态编译的,但是还依赖了其他几个.dll文件,需要把这几个dl ...
- sql种类