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的更多相关文章

  1. ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

    工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...

  2. Nginx支持 React browser router

    修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...

  3. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  4. react 装 router - yarn add react-router-dom@next

    react 装 router yarn add react-router-dom@next

  5. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  6. react react使用css

    在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...

  7. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  8. React/React Native 的ES5 ES6写法对照表-b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  9. [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 ...

随机推荐

  1. valuestack,stackContext,ActionContext.之间的关系以及如何存取数值的

      2013-03-15 10:54 1722人阅读 评论(1) 收藏 举报  分类: J2EE 版权声明:本文为博主原创文章,未经博主允许不得转载. 三者之间的关系如下图所示: ActionCont ...

  2. redis缓存分页数据ID

    1.用户通过分类.属性进来分页时 如果没有缓存,就读数据库前10页的数据Id,转为json,根据cate_分类1+cate_分类2+cate_分类3+arr_属性1+arr_属性2+arr_属性3作为 ...

  3. php 数组排序以及按照某个字段排序

    经常,开发人员发现在PHP中使用这种数据结构对值或者数组元素进行排序非常有用.PHP提供了一些适合多种数组的排序函数,这些函数允许你在数组内部对元素进行排列,也允许用很多不同的方法对它们进行重新排序. ...

  4. webservice 服务端例子+客户端例子+CXF整合spring服务端测试+生成wsdl文件 +cxf客户端代码自动生成

    首先到CXF官网及spring官网下载相关jar架包,这个不多说.webservice是干嘛用的也不多说. 入门例子 模拟新增一个用户,并返回新增结果,成功还是失败. 大概的目录如上,很简单. Res ...

  5. Java WebService入门实例

    Web Services是由企业发布的完成其特定商务需求的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务. Web Service的关键技术和规则: 1.XML:描述 ...

  6. 删除多个Safari书签

    Safari 的书签多了,删除起来很麻烦,可以先选中所有书签,然后再按"Command+Delete",就可以全部删除了.

  7. kafka C客户端librdkafka producer源码分析

    from:http://www.cnblogs.com/xhcqwl/p/3905412.html kafka C客户端librdkafka producer源码分析 简介 kafka网站上提供了C语 ...

  8. 基于密度聚类的DBSCAN和kmeans算法比较

    根据各行业特性,人们提出了多种聚类算法,简单分为:基于层次.划分.密度.图论.网格和模型的几大类. 其中,基于密度的聚类算法以DBSCAN最具有代表性.  场景 一 假设有如下图的一组数据, 生成数据 ...

  9. Window环境下搭建MyEclipse+Tomcat+MAVEN+SVN

    1.JDK的安装 首先下载JDK,这个从sun公司官网(http://www.oracle.com/)可以下载,根据自己的系统选择64位还是32位,安装过程就是next一路到底.安装完成之后当然要配置 ...

  10. 《Lua程序设计 第二版》学习笔记一

    Lua简介 Lua是一种简单.可拓展.可移植及高效的脚本语言. 开始 Lua之间不需要分隔符 运行方式: Linux下: lua -i prog dofile("lib1.lua" ...