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: ["Resources are special Signals designed specifically to handle Async loading. Their purpose is to wrap async values in a way that makes them easy to interact with in Solid's distributed execution model. This is the opposite to ", jsx(_components.code, {
        children: "async"
      }), "/", jsx(_components.code, {
        children: "await"
      }), " or generators which provide sequential execution models. The goal is for async to not block execution and not color our code."]
    }), "\n", jsx(_components.p, {
      children: "Resources can be driven by a source signal that provides the query to an async data fetcher function that returns a promise. The contents of the fetcher function can be anything. You can hit typical REST endpoints or GraphQL or anything that generates a promise. Resources are not opinionated on the means of loading the data, only that they are driven by promises."
    }), "\n", jsxs(_components.p, {
      children: ["The resulting Resource Signal also contains reactive ", jsx(_components.code, {
        children: "loading"
      }), " and ", jsx(_components.code, {
        children: "error"
      }), " properties that make it easy to control our view based on the current status."]
    }), "\n", jsx(_components.p, {
      children: "So let's replace our user signal with a 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: ["It is driven by the ", jsx(_components.code, {
        children: "userId"
      }), " Signal and calls our fetch method on change. Not much else to it."]
    }), "\n", jsxs(_components.p, {
      children: ["The second value that comes back from ", jsx(_components.code, {
        children: "createResource"
      }), " contains a ", jsx(_components.code, {
        children: "mutate"
      }), " method for directly updating the internal Signal and a ", jsx(_components.code, {
        children: "refetch"
      }), " method to reload the current query even if the source hasn't changed."]
    }), "\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"
      }), " uses ", jsx(_components.code, {
        children: "createResource"
      }), " internally to manage its dynamic imports."]
    })]
  });
}
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-c7349da7.js.map
