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: ["Ressourcen sind spezielle Signale, die speziell für asynchrones Laden gedacht sind. Ihr Sinn besteht darin, asynchrone Werte so zu kapseln, dass man innerhalb von Solids verteiltem Ausführungsmodell einfach damit arbeiten kann. Das ist das Gegenteil zu ", jsx(_components.code, {
        children: "async"
      }), "/", jsx(_components.code, {
        children: "await"
      }), " oder Generatoren, die sequentielle Ausführungsmodelle bieten. Das Ziel ist, dass Asynchronität nicht die Ausführung blockiert und nicht auf den Code abfärbt."]
    }), "\n", jsx(_components.p, {
      children: "Ressourcen können durch ein source-Signal getrieben werden, das die Anfrage für eine asynchrone Datenabfrage-Funktion beinhaltet, welche ein Promise zurückgibt. Der Inhalt der Abfrage-Funktion kann alles Mögliche sein. Man kann typische REST-Endpunkte abfragen oder GraphQL oder irgendwas, das ein Promise zurückgibt. Ressourcen sind nicht auf bestimmte Wege festgelegt, Daten zu holen, nur darauf, sie in Promises zu bekommen."
    }), "\n", jsxs(_components.p, {
      children: ["Das resultierende Ressourcen-Signal enthält außerdem die reaktiven Eigenschaften ", jsx(_components.code, {
        children: "loading"
      }), " und ", jsx(_components.code, {
        children: "error"
      }), ", die es einfach machen, unseren View je nach Status zu kontrollieren."]
    }), "\n", jsx(_components.p, {
      children: "Also ersetzen wir unser Signal mit einer Ressource:"
    }), "\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: ["Sie wird vom ", jsx(_components.code, {
        children: "userId"
      }), " Signal angetrieben und ruft unsere fetch-Methode bei Änderung auf. Ganz unkompliziert."]
    }), "\n", jsxs(_components.p, {
      children: ["Der zweite Wert, der von ", jsx(_components.code, {
        children: "createResource"
      }), " zurückgegeben wird, enthält die Methode ", jsx(_components.code, {
        children: "mutate"
      }), ", um das interne Signal direkt zu aktualisieren und ", jsx(_components.code, {
        children: "refetch"
      }), ", um die Ressource neu zu laden, auch wenn sich die source nicht gendert hat."]
    }), "\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"
      }), " benutzt intern ", jsx(_components.code, {
        children: "createResource"
      }), ", um dynamische Importe zu handhaben."]
    })]
  });
}
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-871f3dd1.js.map
