Мутация GraphQL с использованием типов литералов шаблона $ {}

В настоящее время у меня проблемы с мутацией Graphql. Элементы обновления жесткого кодирования работают, но вариант 2, в котором я передаю аргумент, - нет. В сети Google Dev Tools Network я вижу, что передаю [объект Object] как запрос элементов.

Я попытался перейти на приведенный ниже код, что привело к появлению любой ошибки и ошибки повторяющегося идентификатора args.

`{args.elements}`

Любые советы приветствуются. Кроме того, я не использую переменные, поскольку api, похоже, их не принимает ??

api.ts ВАРИАНТ 1: РАБОТАЕТ

export const mutateReq = (args: TW): AxiosPromise<TW[]> => {
  const query = `
mutation {
  update ( id:"${args.id}", name:"${args.name}", iconFile:"${args.iconFile}", elements:[
    [
     {id:"2",name:"element2",link:"https:",elements:[{id:"1",name:"element1",link:"https://",elements:[]}]}
    ],
    [
      {id:"3",name:"element3",link:"https://",elements:[{id:"4", name: "wr", link: "http://", elements: []}]}
    ],
    []
 ]){
    id
    name
    iconFile
    elements {
      id name link
      elements {
        id name link
      }
    }
  }
}`;
  return axios({
    url: url,
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
    },
    data: {
      query: query,
    },
  });
};

api.ts ВАРИАНТ 2: НЕ РАБОТАЕТ

export const mutateReq = (args: TWorkSpace): AxiosPromise<TWorkSpace[]> => {
  const query = `
mutation {
  update ( id:"${args.id}" name:"${args.name}" iconFile:"${args.iconFile}" elements:${args.elements}){
    id
    name
    iconFile
    elements {
      id name link
      elements {
        id name link
      }
    }
  }
}`;
  return axios({
    url: url,
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
    },
    data: {
      query: query,
    },
  });
};

тип данных args

{
id: "1" name: "1" iconFile: "icon.png"
   elements: [
      [
       {id:"2",name:"element2",link:"https://",elements:[{id:"1",name:"element1",link:"https://",elements:[]}]}
      ],
      [
        {id:"3",name:"element3",link:"https://",elements:[{id:"4", name: "wr", link: "http:", elements: []}]}
      ],
      []
   ]
}

избегайте использования строковых манипуляций / литералов, используйте вместо них переменные graphql.org/learn/queries/#variables

xadm 31.03.2021 11:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш запрос GQL представляет собой строку, и когда вы попробуете elements:${args.elements}, он попытается преобразовать объект в строку, которая, скорее всего, будет похожа на [object Object], но вам нужно преобразовать ее в строку JSON, которая даст вам результат, который вы находясь в поиске.

Пытаться:

elements:${JSON.stringify(args.elements)}

Это работает для заданного вопроса. Однако, поскольку я хранил ключ с цитатами, он вернул ошибку (например: {"elements": {"id": "1"}). Хотите знать, почему graphql возвращает данные с "ключом", но не принимает "" при изменении ...

javascriptnoob 31.03.2021 07:44

@javascriptnoob, можете ли вы пояснить, что вы имеете в виду, говоря о хранении ключей с цитатами? Можете ли вы предоставить фрагмент кода и полную информацию об ошибке?

Jack Campbell 31.03.2021 07:49

Я храню данные из запроса graphql в состоянии redux. Получаемые мной данные хранятся в виде {"id": "1" ....}. В приведенной выше мутации я хотел использовать свое состояние в качестве аргументов. Однако, поскольку он хранится с "" на ключах (например, "id"), я не могу просто использовать данные, поскольку обновление мутации принимает id = "1", но не "id": "1".

javascriptnoob 31.03.2021 07:54

Мое плохое, вам действительно стоит использовать это: JSON.stringify (obj) .replace (/ "([^"] +) ": / g, '$ 1:')

Jack Campbell 31.03.2021 08:10

^ это удалит кавычки из всех ключей, хотя также удалит кавычки из крайних случаев, таких как '{"id": "th \\": ing "}', так что имейте в виду

Jack Campbell 31.03.2021 08:10

Другие вопросы по теме