Как определить тип вложенного объекта? Как описывать типы профсоюзов?

Я пытаюсь написать свой typeDefs для запросов.

import {gql} from "@apollo/client";

const typeDefs = gql`
    
    type Query{
        rockets:[Rocket]!
        rocket(id:ID):Rocket!
    }
    type Rocket {
        id:ID!
        name:String!
        mass:RocketMass
    }
    type MassInt{
        kg:Int
    }    
    type MassFloat{
        kg:Float
    }
    
    union Mass = MassInt|MassFloat

    type RocketMass {
        kg: Mass
        lb: Mass
    }

`
export {typeDefs}

Когда я пишу запрос "GET_ROCKET", я получаю ошибку в своей среде IDE.

import {gql} from "@apollo/client";

const GET_ROCKETS = gql`
    query GetRockets {
        rockets{
            id,
            name
        }
    }
`
const GET_ROCKET = gql`
    query GetRocket($id:ID!){
        rocket(id: $id){
        mass {
            kg,
            lb
        }
        name
    }
    }
`
export {GET_ROCKETS, GET_ROCKET}

Как определить тип вложенного объекта? Как описывать типы профсоюзов?

Может ли кто-нибудь объяснить, как я могу использовать свойства «kg» и «lb», которые описаны в моих typedefs, и почему я не могу писать такие объединения? union Mass2 = Int|Float

Поведение ключевого слова "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) для оценки ваших знаний,...
0
0
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вам нужно дать разные имена для полей MassInt.kg и MassFloat.kg, иначе это вызовет ошибку конфликта.

См. Официальный документ типы профсоюзов.

Правильный запрос typeDefs и GET_ROCKET GraphQL должен быть таким:

import express from 'express';
import { ApolloServer, gql } from 'apollo-server-express';
import faker from 'faker';
const app = express();

const typeDefs = gql`
  type Query {
    rockets: [Rocket]!
    rocket(id: ID): Rocket!
  }
  type Rocket {
    id: ID!
    name: String!
    mass: RocketMass
  }
  type MassInt {
    int: Int
  }
  type MassFloat {
    float: Float
  }

  union Mass = MassInt | MassFloat

  type RocketMass {
    kg: Mass
    lb: Mass
  }
`;

const resolvers = {
  Query: {
    rocket: (_, { id }) => {
      return {
        id: 1,
        name: faker.lorem.word(),
        mass: {
          kg: { int: 100 },
          lb: { float: 10.1 },
        },
      };
    },
  },
  Mass: {
    __resolveType: (obj) => {
      if (isInt(obj.int)) {
        return 'MassInt';
      }
      if (isFloat(obj.float)) {
        return 'MassFloat';
      }
      return null;
    },
  },
};

function isInt(n) {
  return Number(n) === n && n % 1 === 0;
}

function isFloat(n) {
  return Number(n) === n && n % 1 !== 0;
}
const server = new ApolloServer({ typeDefs, resolvers });
const port = 4000;
server.applyMiddleware({ app, path: '/graphql' });
app.listen(port, () => console.info(`Apollo server started at http://localhost:${port}`));
query GetRocket($id: ID){
  rocket(id: $id){
    id
    name
    mass {
      kg {
        ... on MassInt {
          int
        }
        ... on MassFloat {
          float
        }
      }
      lb {
        ... on MassInt {
          int
        }
        ... on MassFloat {
          float
        }
      }
    }
  }
}

результат запроса:

{
  "data": {
    "rocket": {
      "id": "1",
      "name": "modi",
      "mass": {
        "kg": {
          "int": 100
        },
        "lb": {
          "float": 10.1
        }
      }
    }
  }
}

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