2019年9月1日 星期日

以GraphqlSchema 建立Schema Object物件

在使用graphql 建立要使用的schema與resolve schema部分大多數都會以GraphQL schema language定義
// 使用GraphQL Schema Definition Language(SDL)定義schema
const typeDefs = gql`
  type Query {
    hello: String
  }
`;
// 建立resolve
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};
// server運作使用
const server = new ApolloServer({ typeDefs, resolvers });
把定義好的typeDefs 與resolvers丟給server就可以跑了

但是如果建立schema的程序希望可以不要手寫SDL
可能是透過程序自動產生 就無法做到
ApolloServer 除了吃typeDefs, resolvers 參數外
直接產生好schema
透過
const server = new ApolloServer({ schema }); 執行
也是可以的

以下範例是說明完全利用Graphql.js來建立schma物件

const graphql = require('graphql')
const queryType = new GraphQLObjectType({
  name: 'Query', // 要建立的type名稱,整個graphql至少要有一個Query, 其他可以是自建類型名稱
  fields: {
    hello: { // 設定有一個hello的查詢
      type: graphql.GraphQLString, // 類型為基本scarla類型,可透過graphql取得
      args: { // 若這查詢可以提供輸入參數
        name: { //參數名稱
          type: graphql.GraphQLString, //參數類型
        },
        age: {
          type: graphql.GraphQLInt
        }
      },
      resolve: (parent, args, context, info) => { // 執行資料處理,args會拿到
        return `im....${args.name} age=${args.age}` 
      }
    },
    oz: {
      name: 'oz',
      type: graphql.GraphQLString
    }
  }
})
const schema = new GraphQLSchema({
  query: queryType
})
const server = new ApolloServer({ schema })
這樣就可以完全用js去建立產生schema運作

以上建立的查詢在client做以下查詢

{
  firstName(name: "oz")
  age
}
得到回應結果

{
  "data": {
    "firstName": "[oz]",
    "age": null
  }
}
api參考https://graphql.org/graphql-js/type/#graphqlobjecttype

2019年8月27日 星期二

在Android Studio開啟Cordova專案

使用cordova建立專案
通常都是透過指令直接操作
但也會有必須要使用Android Studio執行的狀況
以下是在Android Studio內執行Cordova 專案的流程

1.選擇import project(Gradle,Eclips)
2.選擇目錄:選取Cordova專案下的platform/android
  注意不要選取整個codova專案
3.出現錯誤 The minSdk version should not be declared in the android manifest file
  解法
  移除 android/CordovaLib/AndroidManifest.xml與
  android/app/src/main/AndroidManifest.xml內的
  <uses-sdk android:targetSdkVersion="28" android:minSdkVersion="19" />
4.重新執行File/Sync Project with Gradle 即可 執行

2019年8月21日 星期三

Summer's Rain

連續兩個多禮拜的雨
這個夏天 雨也下的夠久的了

退伍後到台北工作 即使沒帶多少行李
還是會把吉他帶在身邊
即使在辭掉工作回高雄一段時間
再回到台北 還是會把吉他帶著

曾有一小段時間在師大對面的樂器行學琴
下班後就從五股背著吉他騎車到和平東路

第一次去 老師 問我想彈什麼樣的音樂
我就把這張CD拿出來
這是我最喜歡的樂團吉他手
我想要這個~

2019年8月16日 星期五

vue-cli環境變數使用

vue-cli在執行許多的程式會需要在不同的情況(model)下
用到不同的環境變數
1.因此預設會有這3種mode
  development|test|production
2.不同mode使用的環境變數 會以下列檔名儲存
.env              # 任何mode都會載入的變數
.env.local        # 任何mode都會載入的變數,只限開發者自己使用的變數,檔案不進git
.env.[mode]       # 指定mode會載入的變數
.env.[mode].local # 指定mode會載入的變數,只限開發者自己使用的變數,檔案不進git
3.env檔案內 變數的設定方式
  以key=value方式寫
  如果是要讓client端可以拿去使用的變數名稱
  必須以VUE_APP_開頭命名
  否則都只有在node環境下才讀得到變數值
4.client端應用
  例 public/index.html本身就是一個樣板
  可用樣板語言,就可以拿client端可用的環境變數來做判斷
  使用或顯示
5.環境變數除了寫在特定的env檔案內以外
  也可以寫在vue.config.js設定檔內

2019年8月14日 星期三

vue-cli 3 webpack設定yaml讀取

目前已經將原本在框架下使用json設定檔案都改成yaml檔案
畢竟yml的結構比json要好上很多
在後端的nodejs上透過js-yaml即可讀取
前端上vue要使用
則需要透過webpack的js-yaml-loader的設定支援讀取
使用上可以很簡單的用
import data from 'js-yaml-loader!./conf/apis.yml'
這樣免設定的方式執行 但還是不太建議直接這樣用

如果是要設定到webpack的config上
使用vue-cli 3 會發現已經完全看不到webpack的設定
所有的設定已經都包裹在整個架構內
如果需要調整或增加webpack設定
可以在根目錄下建立vue.config.js檔案
用來覆寫或增加上定內容

參考vue-cli設定
https://cli.vuejs.org/guide/webpack.html#simple-configuration

以下sample code範例為
修改連線port 並加入yaml loader

module.exports = {
  devServer: {
    port: 1234
  },
  chainWebpack: config => {
    config.module
      .rule('yaml')
      .test(/\.ya?ml$/)
      .use('js-yaml-loader')
      .loader('js-yaml-loader')
      .end()
  }
}