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. python- shutil 高级文件操作

    简介 shutil模块提供了大量的文件的高级操作.特别针对文件拷贝和删除,主要功能为目录和文件操作以及压缩操作.对单个文件的操作也可参见os模块. 拷贝文件 shutil.copyfile(src, ...

  2. Swing杂记——Swing中引入Android的NinePatch技术,让Swing拥有Android的外观定制能力

    [摘要] 本文诣在展示如何在Swing中引入 NinePatch技术(早期有文章里中文译作九格图,暂且这么叫吧^_^,但此术非传统移动手机上的功能布局——九格图哦). [准备篇] Q:何为 NineP ...

  3. scp命令的用法详解

    这篇文章主要是参考了http://blog.csdn.net/jiangkai_nju/article/details/7338177这个博客,要看详细的内容可以参考这个博客进行学习研究,但是我觉得在 ...

  4. $(document).ready(){}、$(fucntion(){})、(function(){})(jQuery)onload()的区别

     1.首先说JQuery的几个写法  $(function(){     //do someting   });   $(document).ready(function(){     //do so ...

  5. 一张图读懂https加密协议

    搭建CA服务器和iis启用https:http://blog.csdn.net/dier4836/article/details/7719532 一张图读懂https加密协议 https是一种加密传输 ...

  6. [译]Probable C# 6.0 features illustrated

    原文: http://damieng.com/blog/2013/12/09/probable-c-6-0-features-illustrated ========================= ...

  7. 【Junit】The import org.junit.Test conflicts with a type defined in the same file报错

    引入Junit后,进行单元测试,莫名其妙报了个这样的错误 The import org.junit.Test conflicts with a type defined in the same fil ...

  8. 点击验证码刷新(tp3.1)--超简单

    省略js点击刷新验证码,虽然看不懂 <img src='http://localhost/app/index.php/Index/verify/'  onclick='this.src=this ...

  9. MAVEN for mac 安装

    http://blog.csdn.net/anialy/article/details/22217937 下载 maven  http://mirrors.hust.edu.cn/apache/mav ...

  10. 用jQuery编的一个分页小代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...