Closed3

React + Apolloのテストで詰まったところ

ロピタルロピタル

詰まったところ

Queryなどで引数を取るときにエラーが出た。例えばこんな時👇

query Countries($limit: Int!) {
  countries(limit: $limit) {
    name
    code
  }
}

Custom Hooksではこんな感じでデータをフェッチしている

const { loading, error, data } = useQuery(COUNTRIES, {
  variables: { limit: 10 }, 
});

モックはこんな感じで書いてみた

// :: DATA :: 
  const mexico = {
    name: "Mexico",
    code: "MX"
  };
  const argentina = {
    name: "Argentina",
    code: "AR"
  };
  const portugal = {
    name: "Portugal",
    code: "PT"
  };

  // :: MOCKS :: 
  const countriesQueryMock = {
    request: {
      query: COUNTRIES,
      variables: { limit: 5 }, 
    },
    result: {
      data: {
        countries: [argentina, mexico, portugal]
      }
    }
  };

ここでエラーが発生した。

ロピタルロピタル

解決策

カスタムHooks内のuseQuery引数のvariablesとmockのvariablesの値を同じにする。

今回の例では、カスタムHooks内では引数に10を指定していて、mockでは5を指定しているので、どちらかに合わせる。

このスクラップは2021/06/06にクローズされました