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. Yii2.0 GridView 新增添加按钮

    <?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'col ...

  2. 网络方案 & HTTP状态码

    在iOS中,常见的发送HTTP请求的方案包括: 苹果官方 名称 说明 NSURLConnection iOS 2.0 推出,用法简单,最古老最经典最直接的一种方案 NSURLSession iOS 7 ...

  3. 【10-25】OOP基础-飞机游戏知识点

    知识点 鼠标适配器类为抽象类,使用匿名子类实现鼠标事件的重写,创建一个鼠标适配器对象 添加鼠标事件监听器到JPanel对象实现鼠标的响应 创建定时器Timer对象,在定时器的任务列表方法schedul ...

  4. Rsession让Java调用R更简单

    Rsession让Java调用R更简单 R的极客理想系列文章,涵盖了R的思想,使用,工具,创新等的一系列要点,以我个人的学习和体验去诠释R的强大. R语言作为统计学一门语言,一直在小众领域闪耀着光芒. ...

  5. Linux下的一个图形管理工具webmin

    这个工具其实我在两年前的小白时期还是经常用的,因为那时候对Linux比较陌生在为数server的时候帮了我很多工作,现在周末外面下雨,闲来无事莫名其妙的想起他来. 工具优点:最大特点是他是脚本安装 不 ...

  6. hdu4939 Stupid Tower Defense (DP)

    2014多校7 第二水的题 4939 Stupid Tower Defense Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 131 ...

  7. edwin报警和监控平台开源了(python源码)

    简单介绍一下edwin edwin是一个报警和监控平台, 可以使用它监控任意东西, 如有异常(分为警告级和严重级), 可以发出报警. 可以自定义报警的通知方式, 比如邮件/短信/电话. 另外, 它提供 ...

  8. Javascript软键盘设计

    国内大多数网站的密码在网络传输过程中都是明文的,我们目前正在做的产品也是这样的情形,这正常吗? 大家都偷懒?不重视安全?各人持有观点,有人认为明文传输并不是想象中的那么可怕,事实上正常情况下这些报文你 ...

  9. java mail

    java mail 1.配置 mvn <dependency> <groupId>javax.mail</groupId> <artifactId>ma ...

  10. 解决 Mac Pro 用 Excel 打开 CSV 文件不能正常显示的问题

    在做系统后台的时候,往往会有导出系统信息(如,用户信息)功能,一般导出为CSV文件. 先前在 Windows 下,导出的CSV文件用 Excel 打开能正常显示,可现在在 Mac 系统中,显示一团乱, ...