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",
    a: "a",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "Ресурсы"
      }), " это специальные ", jsx(_components.code, {
        children: "Сигналы"
      }), ", которые были созданы для того, чтобы помочь с асинхронной загрузкой. Они оборачивают асинхронные операции таким образом, чтобы мы могли в полной мере использовать модель распределенного выполнения Solid. Эта модель противоположна ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/async_function",
        children: "async"
      }), "/", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/await",
        children: "await"
      }), " или ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Generator",
        children: "генераторам"
      }), ", которые работают последовательно. В результате использования ", jsx(_components.code, {
        children: "Ресурсов"
      }), " мы избегаем блокировки отрисовки."]
    }), "\n", jsxs(_components.p, {
      children: ["Для использования ", jsx(_components.code, {
        children: "Ресурсов"
      }), " необходимо создать функцию-сборщик (", jsx(_components.code, {
        children: "fetcher function"
      }), "), которая будет возвращать ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise",
        children: "промис"
      }), ". Например, вы можете использовать её для того, чтобы делать запрос на REST или GraphQL API. Ресурсы не имеют строгих указаний о том, как вы загружаете ваши данные и о том, как эта функция выглядит внутри, до тех пор пока результатом выполнения этой функции является промис."]
    }), "\n", jsxs(_components.p, {
      children: ["В результате выполнения ", jsx(_components.code, {
        children: "Ресурса"
      }), " вы получаете реактивные свойства ", jsx(_components.code, {
        children: "loading"
      }), " и ", jsx(_components.code, {
        children: "error"
      }), ", которые помогут вам легко видеть статус текущего запроса."]
    }), "\n", jsxs(_components.p, {
      children: ["Давайте заменим наш ", jsx(_components.code, {
        children: "Сигнал"
      }), " ", jsx(_components.code, {
        children: "user"
      }), " ", jsx(_components.code, {
        children: "Ресурсом"
      }), ":"]
    }), "\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: "Сигнала"
      }), " ", jsx(_components.code, {
        children: "userId"
      }), " и при его изменении метод будет вызван снова."]
    }), "\n", jsxs(_components.p, {
      children: ["Второе значение в результате выполнения ", jsx(_components.code, {
        children: "createResource"
      }), " включает в себя метод ", jsx(_components.code, {
        children: "mutate"
      }), ", который позволяет обновить внутренний Сигнал ", jsx(_components.code, {
        children: "userId"
      }), ", и метод ", jsx(_components.code, {
        children: "refetch"
      }), ", который позволяет заново выполнить запрос, даже если ", jsx(_components.code, {
        children: "Сигнал"
      }), " ", jsx(_components.code, {
        children: "userId"
      }), " не изменился."]
    }), "\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-d0b47e5f.js.map
