import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Resource は、非同期のロードを処理するために特別に設計された Signal です。その目的は、Solid の分散実行モデルにおいて、非同期の値を簡単に操作できるようにラップすることです。これは、シーケンシャルな実行モデルを提供する ", jsx(_components.code, {
        children: "async"
      }), "/", jsx(_components.code, {
        children: "await"
      }), " やジェネレーターとは正反対です。非同期が実行をブロックしたり、コードに色をつけたりしないようにするのを目標としています。"]
    }), "\n", jsx(_components.p, {
      children: "Resource は、Promise を返す非同期データフェッチャー関数にクエリを提供するソース Signal によって駆動できます。フェッチャー関数の内容は何でもかまいません。典型的な REST エンドポイントでも、GraphQL でも、Promise を生成するものであれば何でもいいのです。Resource は、データをロードする手段にはこだわらず、Promise によって駆動されるだけです。"
    }), "\n", jsxs(_components.p, {
      children: ["結果として得られる Resource の Signal には、リアクティブな ", jsx(_components.code, {
        children: "loading"
      }), " と ", jsx(_components.code, {
        children: "error"
      }), " プロパティが含まれており、現在のステータスに基づいてビューを簡単に制御できます。"]
    }), "\n", jsx(_components.p, {
      children: "それでは、user の Signal を Resource に置き換えてみましょう:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [user] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createResource"
        }), "(userId, fetchUser);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["これは、", jsx(_components.code, {
        children: "userId"
      }), " Signal によって駆動され、変更があると fetch メソッドを呼び出します。それ以外にはあまりありません。"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createResource"
      }), " から返ってくる 2 つ目の値には、内部の Signal を直接更新するための ", jsx(_components.code, {
        children: "mutate"
      }), " メソッドと、ソースが変更されていなくても現在のクエリをリロードするための ", jsx(_components.code, {
        children: "refetch"
      }), " メソッドが含まれています。"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [user, { mutate, refetch }] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createResource"
        }), "(userId, fetchUser);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "lazy"
      }), " は、動的インポートを管理するために内部で ", jsx(_components.code, {
        children: "createResource"
      }), " を使用しています。"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-c8abcce3.js.map
