同學，GraphQL了解一下實踐篇

技術棧準備

核心依賴（npm包）：

express：node服務端框架；

apollo-server-express：express graphql中介軟體，提供graphiqlexpress與graphqlexpress兩個方法；

graphql：graphql js實現基礎庫；

axios：ajax通訊，這裡用於和已有的restful api通訊；

除了安裝以上的核心依賴，你還需要安裝babel相關的依賴，並配置babel編譯檔案，具體可檢視上面git下來的檔案配置。

搭建服務

怎麼引入包這裡不再贅述，我們先不帶入graphql，啟動乙個express服務：

const port = 8080;
res.send('hello graphql!');
});

啟動這個服務，並在瀏覽器輸入http://localhost:8080/graphql，可以看到hello graphql這段歡迎詞，到這裡我們的後端服務已經搭建成功，接著我們建立我們的graphql服務，刪除監聽'/graphql'這個路由的**，新增一下一段**：

import schema from './schema';
const port = 8080;
endpointurl: '/graphql'
}));

至此，我們就新增了graphql服務，graphql是用於接收url請求的，而graphiql會呈現乙個graphql查詢介面，這個介面可以用於查詢體驗，檢視文件定義，這是graphql官方比較推薦的乙個技術，就像下面這樣：

import  from 'graphql/type';
import  from '../service/index';
// 查詢某乙個user的詳細資料模型
const usertype = new graphqlobjecttype(,
username: ,
usermixnick: 
},resolve: (root, args, context, info) =>  = root;
console.log(info)
return getusermixnick(id);}},
military: ,
age: ,
height: ,
education: ,
enlisttime: ,
enlistyear: ,
}});
// 查詢所有的users
const paginationtype = new graphqlobjecttype(,
pagenum: ,
total: ,
data: 
}});
// 定義schema
const schema = new graphqlschema(
},resolve: (root, args, context, info) =>  = args;
return getuser(id);}},
users: ,
pagesize: 
},resolve: (root, ) => }}
})});
export default schema;

這裡不想花太大的篇幅去講解，可以git clone下來自己嘗試一下，至此我們就成功的建立了乙個graphql服務，可以在graphiql介面查詢體會一下。

頁面結構

這裡需要強調一下client**的實現：

const client = new apolloclient(,
});

列表頁的實現

react-apollo在實現graphql結合react程式設計的方式上，借鑑了類似react-redux的connect高階元件的思想，react-apollo提供乙個方法graphql用於生成乙個容器，這個容器會從遠端拉去資料，然後作為props傳遞給展示元件,直接看**的實現：

// 建立乙個查詢  
const users_query = gql`
query userquery($pagenum: int,$pagesize:int)}}
`;// 生成乙個graphql容器，會執行users_query這個查詢；
const withquery = graphql(users_query, ,
}),});
// 列表展示元件
class list extends component ;
}render()  } = this.props;
if (loading) 
const  = users;
return (
總共有名軍士);}
}// 將資料注入到展示元件中
const character = withcharacter(list);
export default character;

以上就是對列表展示元件的實現，思想還是比較簡單，和我們基於react + redux程式設計比較像。

詳情頁的實現

其實現思路和列表頁其實是一樣的，只是涉及到動態傳參的問題，上查詢那一段**說一下：

const user_query = gql`
query userquery($id: id!)}`;
const withquery = graphql(user_query,  } = props; // 重點就是從props中獲取路由傳遞的引數
return ,
};},
});

withquery這個高階元件同樣可以從父元件中獲取props，然後通過其option方法動態的生成查詢引數，至於詳細頁展示元件的實現，可以具體參考git上面的**。

到最後輸入url可以看到如下的結果：

同學，GraphQL了解一下實踐篇

了解一下NTLM

了解一下 display flex

指標了解一下

同學，GraphQL了解一下 實踐篇

了解一下NTLM

了解一下 display flex

指標了解一下

相關推薦

同學，GraphQL了解一下實踐篇