Spectrum использует спецификационный c шаблон для модальных форм , который я хотел бы воспроизвести с помощью обработанных машин машинного кода, GraphQL и GraphQL-codegen.
Теперь, что у меня сейчас есть:
enum ModalType {
LOGIN,
SIGNUP,
}
type LoginModalProps{
loginVal: String!
}
type SignupModalProps{
signupVal: String!
}
extend type Query {
openedModal: OpenedModal!
}
union ModalProps = LoginModalProps | SignupModalProps
type OpenedModal {
modalType: ModalType!
modalProps: ModalProps!
}
export const GET_OPENED_MODAL = gql`
query OpenedModal{
openedModal @client{
modalType,
modalProps{
... on LoginModalProps {
loginVal
}
... on SignupModalProps {
signupVal
}
}
}
}
`;
Код выше используется graphql-codegen для генерации безопасных типов Хук запроса используется ниже.
import React from 'react';
import LoginModal from '../containers/modals/LoginModal';
import SignupModal from '../containers/modals/SignupModal';
import {
useOpenedModalQuery,
ModalType,
LoginModalProps,
SignupModalProps
} from '../../generated/graphql';
const ModalContainer: React.FC = () => {
const { data } = useOpenedModalQuery();
switch(data?.openedModal.modalType){
case ModalType.Login:
return <LoginModal {...data?.openedModal.modalProps as LoginModalProps}/>
case ModalType.Signup:
return <SignupModal {...data?.openedModal.modalProps as SignupModalProps}/>
default:
return null;
}
}
export default ModalContainer
После этого модальное объявление выглядит следующим образом:
import { LoginModalProps } from '../../../generated/graphql';
const LoginModal: React.FC<LoginModalProps> = ({
loginVal
}) => {
Я новичок в этом мире типизированных и GraphQL, и мне кажется, что это можно сделать лучше. - особенно оператор регистра переключателя, который мне пришлось использовать вместо исходного объекта. Есть ли способ сохранить связь между ModalType и ModalPropsType? И остается ли код безопасным с использованием приведения as
к ModalProps?