AWS Amplify GraphQL Operations с помощью TypeScript и крючков – Часть 1 [Запросы]

Я большой поклонник Amplify. Я также большой поклонник TypeScript. Amplify не создается с помощью TypeScript, и для его эффективного использования, иногда вам нужно оказать ему небольшую помощь. Это особенно верно, когда дело доходит до GraphQL. С появлением крючков мы можем создать несколько хороших утилит для себя, которые позволяют нам использовать силу TypeScript с помощью наших запросов GraphQL. Посмотрим, как это выглядит.

> Я буду предполагать, что знакомство с React и TypeScript, включая использование Amplify и GraphQL для этого поста. В Интернете есть множество отличных ресурсов. Вот отличный набор шагов для настройки аналогичного проекта. Или вы можете клонировать приложение Sample и запустить Amplify init в корне проекта, чтобы увидеть конечный результат.

Простой запрос

От нашего Пример приложения У нас есть список популярных игр, которые мы хотим получить. Запрос выглядит так:

popularGames {
    id
    name
    popularity
    url
    summary
    # ommitted for brevity
}

Начав, это отличное первое начало того, к чему мы стремимся. Мы хотим использовать Использоватьэффект Чтобы обработать наши данные. Мы используем Amplify’s graphql Метод и передача запроса GraphQL из вышеупомянутого в GraphQloperation метод

React.useEffect(() => {
  const fetchGames = async () => {
    try {
      const response = await API.graphql(graphqlOperation(popularGames));
    } catch (error) {
      console.log(error);
    }
  };

  fetchGames();
}, []);

Объекты ответа имеют свойство данных, которое содержит наш список игр. Вот пара из списка.

{
  "data": {
    "popularGames": [
      {
        "id": "76882",
        "name": "Sekiro: Shadows Die Twice",
        "popularity": 3954.25
      },
      {
        "id": "114455",
        "name": "Pacify",
        "popularity": 1472.0
      }
    ]
  }
}

Мы хотим отобразить их на нашей странице, поэтому нам нужно загрузить их в состояние. С крючками вы выполняете это, создав USESTATE Объявление, а затем используя метод, созданный для вас, чтобы загрузить их в состояние.

const [gameData, setGameData] = React.useState(undefined); 

React.useEffect(() => {
  const fetchGames = async () => {
    try {
      const response: any = await API.graphql(graphqlOperation(popularGames));
      setGameData(response.data);
    } catch (error) {
      console.log(error);
    }
  };

  fetchGames();
}, []);

На этом этапе вы можете отобразить свои игры на странице, используя Gamedata объект.

Но в TypeScript Land у нас на самом деле больше проблем здесь. Инициализируя объект состояния в неопределенном виде, TypeScript может только сделать вывод, что значение разрешено для Gamedata Объект не определен и даст нам ошибку, если мы попытаемся установить наш ответ запроса, используя SetGamedata метод Кроме того, есть ключевое слово, которое мы использовали, чтобы преодолеть эту проблему, которое кусает много разработчика TypeScript в заднице.

Любые

Это слово поразит страх в сердца всех, кто его свидетельствует. По крайней мере, это должно быть, если вы хотите, чтобы ваше будущее я поблагодарил ваше прошлое «я» (спасибо, Пол , за это великое понимание).

Мы не хотим любой S в любом месте.

Мы действительно хотим стараться изо всех сил, чтобы дать себе и своим инструментам как можно больше власти.

Мы не можем сказать, какими будут наши данные прямо сейчас, что является проблемой … но Amplify может помочь нам.

Типы спасения

В нашем проекте, если он еще не настроен, нам нужно запустить Amplify настройка CodeGen . Это будет настроить генерацию кода и проведет нас через процесс генерации типов на основе наших запросов. Это очень полезно (и, насколько я понимаю, должно быть по умолчанию, если файл .tconfig присутствует в корне проекта …).

Это дает нам тип, который мы можем использовать для наших данных. Обычно мы могли бы просто бросить это после переменной и покончить с ней.

const response: { data: PopularGamesQuery } = await API.graphql(
  graphqlOperation(popularGames)
);

Мы знаем, что ответ будет таким типом, если операция не выполняется. Однако типы, возвращаемые graphql Функция – это мэшап Graphqlresult и Наблюдаемый Поскольку эта же функция используется для обоих. Пока это не изменится, мы сообщим ему знать, что мы ожидаем вернуться. Мы можем сделать это, используя как Ключевое слово, чтобы сообщить TypeScript, что мы знаем, наш тип будет.

const response = (await API.graphql(graphqlOperation(popularGames))) as {
  data: PopularGamesQuery;
};

Теперь мы получаем помощь, которую мы хотим. Парив над Ответ Объект подтверждает, что TypeScript распознает ответ как объект с свойством данных типа Populargamesquery Анкет

Игры, Setstate

Мы будем использовать тот же тип, чтобы рассказать нашему USESTATE Функция, как мы хотим использовать наш Gamedata объект.

USESTATE принимает Общий параметр типа Это позволяет нам сообщить функции о типе, который мы хотим использовать.

const [gameData, setGameData] = React.useState(
  undefined
);

Здесь мы прошли то же самое Populargamesquery Тип (а также возможное неопределенное значение, которое мы используем для его инициализации). Это привязывает компилятор TypeScript, и мы можем двигаться вперед с отображением наших игр.

Как бы это ни было, есть несколько вещей, которые смотрят нам в лицо. Мы можем извлечь эти вещи и создать некоторый код повторного использования, который будет намного проще в будущих запросах в других компонентах. Пользовательские крючки на помощь!

Оставайтесь с нами для следующего поста, где мы это делаем!

Этот пост был первоначально опубликован в Мой сайт Анкет Вы можете увидеть это и другие такие статьи, как это, а также то, что я все. Следуй за мной на @twitter и обратитесь за рукой, если у вас есть какие -либо вопросы!

Оригинал: “https://dev.to/mwarger/aws-amplify-graphql-queries-with-typescript-and-hooks-1e2”