GraphQLの記事

アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた - WPJ

githubからcloneして 各フォルダ内でnpm installする。 そしてnpm start dev。

1 + M + M + sum(Am)

この計算は何？ 1回・・・もとのAPI「1 call to get the movie links」 Mは映画分の画像取得？「For each movie link, grab the movie object」 もう1つのMは？「One call (for each movie) to get the links to actors in this movie」かな？ sum(Am)・・・１映画についての俳優

ここでは映画のフィールドは8つのうち2つのみ、俳優は7つのうち2つのみ

  {
    "id": 1,
    "title": "The Shawshank Redemption",
    "release_year": 1993,
    "tags": [
      "Crime",
      "Drama"
    ],
    "rating": 9.3,
    "actors": [
      {
        "id": 1,
        "name": "Tim Robbins",
        "dob": "10/16/1958",
        "num_credits": 73,
        "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTI1OTYxNzAxOF5BMl5BanBnXkFtZTYwNTE5ODI4._V1_.jpg",
        "href": "http://localhost:3000/actor/1",
        "movies": "http://localhost:3000/actor/1/movies"
      },
      {
        "id": 2,
        "name": "Morgan Freeman",
        "dob": "06/01/1937",
        "num_credits": 120,
        "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTc0MDMyMzI2OF5BMl5BanBnXkFtZTcwMzM2OTk1MQ@@._V1_UX214_CR0,0,214,317_AL_.jpg",
        "href": "http://localhost:3000/actor/2",
        "movies": "http://localhost:3000/actor/2/movies"
      }
    ],
    "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_UX182_CR0,0,182,268_AL_.jpg",
    "href": "http://localhost:3000/movie/1"
  },

id title release_year tags rating actors image href の8つのうち titleとimage

id name dob num_credits image href movies のうち name、image

Vue,無限スクロール

Nuxt.jsでの使い方わからなかった。

vue-infinite-loadingっての使いたい。

ドキュメント通りだとwindow is not definedとかエラーでる。 How to use vue-infinite-loading in Nuxt.js (Vue.js) - Get Help - Vue Forum

これを参考にした。

プロジェクト直下からのパス plugins/infiniteloading.js に以下を追加

import Vue from 'vue';
import InfiniteLoading from 'vue-infinite-loading';

Vue.component('infinite-loading', InfiniteLoading);

nuxt.config.jsに以下を追加 module.exports = { }のなかに。

plugins: [
  { src: '~/plugins/infiniteloading', ssr: false }
]

さっきの質問してる人とは少し変えてる。

あとはテンプレート内に

    <p v-for="item in list" :key="item.id">
      Line:
      <span v-text="item"></span>
    </p>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading>

JSでは

  data () {
    return {
      // 無限ループ.
      list: [],
    }
  },

メソッド

  methods: {
    // 無限ループ.
    onInfinite: function () {
      setTimeout(() => {
        const temp = []

        for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          temp.push(i)
        }
        this.list = this.list.concat(temp)
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
      }, 1000)
    },
  },

これでとりあえず質問した人のは動く。

material-uiでアンダーライン消す

https://github.com/mui-org/material-ui/issues/2475

<TextField hintText="Hint Text" underlineStyle={{display: 'none'}} />

What is 'pristine' and 'submitting' in reduxForm?

https://stackoverflow.com/questions/52197261/what-is-pristine-and-submitting-in-reduxform/52197685

keepDirtyOnReinitializeとかRefuxForm

https://github.com/JedWatson/react-select/issues/2131

updateUnregisteredFields : boolean [optional] Used in combination with keepDirtyOnReinitialize. Will update every initialValue which is still pristine. Normally only registered Fields will be updated. In most cases, this option should be set to true to work as expected and avoid edge cases. It defaults to false because of non-breaking backwards compatibility.