Question

我需要定义数据结构有两个原因。一个用于PropTypes，另一个用于GraphQL查询。所以我创建了一个像这样的对象：

const SHAPE = {
    id: 'string.isRequired',
    name: 'string.isRequired',
    address: 'string.isRequired',
    creator: {
        displayname: 'string.isRequired',
        id: 'string.isRequired'
    }
}

我写了一个函数来创建一个graphql查询，但后来我找到了graphql生成器！我试图对React PropTypes做同样的事情，有人知道吗？

它应该将上面的内容转换为：

PropTypes.shape({
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    address: PropTypes.string.isRequired,
    creator: PropTypes.shape({
        displayname: PropTypes.string.isRequired,
        id: PropTypes.string.isRequired
    })
})

我只是觉得在崩溃之前我可能会问。我浪费时间做graphql 1＆gt; _＆lt;哈哈

Answer 1

这也是生成PropType的好工具：

https://github.com/rmosolgo/prop-types

您可以在线尝试

Answer 2

所以我为自己写了这个小东西，它有效，它可能会帮助别人：

依赖关系：

function isObject(avar) {
    // cosntructor.name tested for `function Animal(){}; var a = new Animal(); isObject(a);` will return true otherwise as it is [Object object]
    return Object.prototype.toString.call(avar) === '[object Object]' && avar.constructor.name === 'Object';
}

function deepAccessUsingString(obj, dotpath) {
  dotpath.split('.').reduce((nested, key) => nested[key], obj);
}

以下是代码：

import { PropTypes } from 'react';

function createPropTypeShape(obj) {
    let shape = {};
    let isrequired = obj.isRequired;
    delete obj.isRequired;
    let isarray = obj.isArray;
    delete obj.isArray;

    for (let [key, val] of Object.entries(obj))
        shape[key] = isObject(val) ? createPropTypeShape(val) : deepAccessUsingString(PropTypes, val);

    let rshape = PropTypes.shape(shape);
    if (isarray) rshape = PropTypes.arrayOf(rshape);
    return isrequired ? rshape.isRequired : rshape;
}

我添加了一个功能，一个键为isRequired bool，isArray bool这告诉我是否需要这个形状：在OP上使用它：

const SHAPE = {
    isRequired: true,
    id: 'string.isRequired',
    name: 'string.isRequired',
    address: 'string.isRequired',
    creator: {
        isRequired: false, // can omit falsey value
        displayname: 'string.isRequired',
        id: 'string.isRequired'
    },
    comments {
        isArray: true,
        isRequired: true,
        text: 'string.isRequired'
    }
}

createPropTypesShape(SHAPE)给出：

PropTypes.shape({
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    address: PropTypes.string.isRequired,
    creator: PropTypes.shape({
        displayname: PropTypes.string.isRequired,
        id: PropTypes.string.isRequired
    }) // notice that this is NOT required
    comments: PropTypes.arrayOf(PropTypes.shape({ // notice that this is arrayOf due to `isArray: true`
        text: PropTypes.string.isRequired
    }))
}).isRequired

GraphQL部分

如果您对grpahql查询生成器感兴趣，请执行以下操作：

export function createGqlQuery(obj) {
    let shape = [];

    delete obj.isRequired;
    delete obj.isArray;

    for (let [key, val] of Object.entries(obj))
      shape.push(isObject(val) ? `${key} ${createGqlQuery(val)}` : key);

    return '{' + shape.join(' ') + '}';
}

在上面的形状上运行它会给出：

createGqlQuery(SHAPE) - ＆gt; {id name address creator {displayname id} comments {text}}

来自对象的PropTypes.shape自动生成器（类似于createGraphqlQuery）

2 个答案:

GraphQL部分