# R201 非官方共筆 Day1

官方共筆請移駕[這裡](https://docs.google.com/document/d/1sVfQHB5ajP-ZAh32v_z0Fi_qsmZV7gvm305ox9O-G1Y/edit)

## JavaScript Fuzzing in Mozilla, 2017

> Fuzzing: 模糊測試

投影片：<https://nth10sd.github.io/js-fuzzing-in-mozilla/>

### Mozilla Security Github Projects

* Lithium
* octo

## 友善 OPEN API 的傳說 Apollo + GraphQL

線上發問: <http://sli.do/#coscup201>

### RESTful API

* SuperAgent
* Postman

### GraphQL

* 寫完程式碼，文件就寫好了
* 官方是 React 套件

### Code = Document

### 後端有什麼好處

* React
* Relay

### Apollo

<https://github.com/apollographql>

* React 官方正式支援
* Vue.JS 非官方正式支援

###

* type & model
* table & row
* /users & /users/1

typename + id = global id

### unique id on server

<https://github.com/rs/xid>

### GitHub Contributtor ID

* fromGlobalId
* toGlocalId
* binary => base62

<http://dev.apollodata.com/react/cache-updates.html#normalization>

### book author id

* Automatic store updates
* Update after a mutation
* refetchQueries
* update

### Get node by primary key and then...

* DataLoader

### ORM?

knex-cache-model

### AMP - Prefetching Data

* The next step of a multi-step wizard immediately.
* The route of a call-to-action button.
* All of the data for a sub-area of the application, to make navigating within that area instant.

const prefetchComments = (...args) => () => {
    client.query()
}

### Optimistic UI

* Mutate

### PubNub

* WebSocket
* Subscriptions

schema {
    query: Query
    mutation: Mutation
    subscription: Subscription
}

pubsub.asyncIterator()
pubsub.publish(, {

})

### Using an external PubSub Engine (Redis/MQTT)

###

unsubscribe = apolloClient.subscribeToMore({
    document: ,
    variables: {},
    updateQuery: () => {}
})

### 還有更多東西

### Server-side User Input Validation

<https://github.com/yuttin1987/graphql-tower>

* GID, Date, Expiration, Sentence, Mobile

### Pagination and Edges

* Offset-based
* Cursor-based

* QueryWithNode
* QueryWithConnection
* Mutation

export default class extends QueryWithConnection {
    type = GraphQLMediaInterface
    middleware = [authentication];
    afterware = [pagination];
    
    resolve = async () => {
        const media = new Media();
        return (await media.fetchAll()).toArray()
    }
}

### field by user

export default new GraphQLObjectType({
    name: 'User',
    interfaces: [GraphQLNodeInterface],
    fields: () => ({
        id: new GraphQLGlobal
    })
})

### apollographql/apollo-client

<https://github.com/apollographql/apollo-client>

Path: `apollo-client/test/mocks`

### Jest (UnitTest)

* <https://github.com/airbnb/enzyme>
* <https://github.com/adriantoine/enzyme-to-json>
* <https://github.com/yutin1987/jest-mock-knex>

### Wrapping a REST API in GraphQL

<https://github.com/apollographql/apollo-client/issues/379>

### GraphiQL

<https://stage.mutix.social/graphiql>