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. mysql和oracle的区别(功能性能、选择、使用它们时的sql等对比)

    一.并发性 并发性是oltp数据库最重要的特性,但并发涉及到资源的获取.共享与锁定. mysql:mysql以表级锁为主,对资源锁定的粒度很大,如果一个session对一个表加锁时间过长,会让其他se ...

  2. hdu5009 Paint Pearls (DP+模拟链表)

    http://acm.hdu.edu.cn/showproblem.php?pid=5009 2014网络赛 西安 比较难的题 Paint Pearls Time Limit: 4000/2000 M ...

  3. PHP获取MAC地址的函数代码

    获取网卡的MAC地址原码;目前支持WIN/LINUX系统 获取机器网卡的物理(MAC)地址   复制代码 代码如下: <?php /** 获取网卡的MAC地址原码:目前支持WIN/LINUX系统 ...

  4. 1、Java背景、标示符、运算符、转义字符

    一.Java平台: 1.Java的创建:1991年由SUN公司创建. 2.Java的特点:面向对象.可移植性.多线程.分布式.可靠.安全. 3.Java的三个架构:JavaEE.JavaSElect. ...

  5. [Storm] java.io.FileNotFoundException: File '../stormconf.ser' does not exist

    This bug will kill supervisors Affects Version/s: 0.9.2-incubating, 0.9.3, 0.9.4 Fix Version/s: 0.10 ...

  6. CodeForces 353B Two Heaps

    B. Two Heaps   Valera has 2·n cubes, each cube contains an integer from 10 to 99. He arbitrarily cho ...

  7. ZOJ 3201 Tree of Tree

    树形DP.... Tree of Tree Time Limit: 1 Second      Memory Limit: 32768 KB You're given a tree with weig ...

  8. 两个伪类下特有的属性 content

    更加具体的可以参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/content

  9. bug--java访问hdfs (Server IPC version 9 cannot communicate with client version 4 错误)

    1. 今天想做一个hdfs的java工具类,但是在连接hdfs的时候,报如下错误: Exception in thread "main" org.apache.hadoop.ipc ...

  10. Swift语法入门

    正文参考: https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Progra ...