Реагируйте на шаблон модального контейнера с машинописью и graphQL - PullRequest
1 голос
/ 23 февраля 2020

Spectrum использует спецификационный c шаблон для модальных форм , который я хотел бы воспроизвести с помощью обработанных машин машинного кода, GraphQL и GraphQL-codegen.

Теперь, что у меня сейчас есть:

  • Схема клиента GraphQL
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!
}
  • Запрос GraphQL
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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...