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. 轻取帝国CMS管理员密码

    “帝国”CMS是一套著名的PHP整站程序,是国内使用人数最多的PHPCMS程序之一.令人无奈的是,“帝国”虽然把势力壮大了,却忽略了自身防护的建设,结果在黑客攻击下,“帝国”沦陷了.“帝国”CMS曝出 ...

  2. mysql和oracle的区别(功能性能、选择、使用它们时的sql等对比)

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

  3. nginx: [warn] conflicting server name "localhost" on 0.0.0.0:80, ignored

    修改nginx配置参数后,使用nginx -t检查配置. 提示successfull后就可以使用 nginx -s reload来重新加载配置 我配置的过程中遇到这样的问题,就是绑定了主机名后,重新加 ...

  4. hdu5072 Coprime (2014鞍山区域赛C题)(数论)

    http://acm.hdu.edu.cn/showproblem.php?pid=5072 题意:给出N个数,求有多少个三元组,满足三个数全部两两互质或全部两两不互质. 题解: http://dty ...

  5. webpack入门(一)——webpack 介绍

    如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript. 2. 现代浏览器提供更广泛的接口. 3. 整页刷新的情况越来越少,甚至更多代码在同一个页面.(SPA) 因此有很多代码 ...

  6. 找不到类型“{x}.{x}”,它在 ServiceHost 指令中提供为 Service 特性值,或在配置元素 system.serviceModel/serviceHostingEnvironment/serviceActivations 中提供。

    最近在搞一个WCF的项目... 刚开始在这条路上走... 各种崎岖... 网上搜到的一种解决方案(也是大多数情况的解决方案): 原文:http://www.cnblogs.com/Olive116/p ...

  7. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  8. nyoj 289 苹果 动态规划 (java)

    分析:0-1背包问题 第一次写了一大串, 时间:576  内存:4152 看了牛的代码后,恍然大悟:看来我现在还正处于鸟的阶段! 第一次代码: #include<stdio.h> #inc ...

  9. ubuntu安装ssh

    为了解决远程连接ubuntu服务器控制端,方便操作.ubuntu不同的版本安装方式一致!首先在ubuntu服务器下安装SSH服务linux安装命令:sudo apt-get install opens ...

  10. PHP基础 之 数组(一)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...