- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在 Apollo 应用程序(也包括 GraphQL/Relay)中,人们可以选择将数据需求并置到组件中,或者最终自己组装大型 GraphQL 查询。我们选择将数据需求并置到组件中,因为我们期望从长远来看有更好的可维护性,因为您不需要查看整个组件树或页面来查看所有数据需求,并且可以在本地添加新需求。
我想更好地了解如何使用 Apollo 客户端组合 GraphQL 片段。我知道该怎么做,但我想知道如何做得更好。
目前,编写我的片段涉及相当多的样板文件,特别是当我的组件只是不受影响地传递属性时。
首先,我们来看一个简单的组件:
export const User = ({
user: {
firstName,
lastName,
job,
email,
pictureUrl,
color
},
...props
}) => (
<UserWrapper {...props}>
<UserAvatarWrapper>
<Avatar
firstName={firstName}
lastName={lastName}
color={color}
src={pictureUrl}
/>
</UserAvatarWrapper>
<UserContentWrapper>
{(firstName || lastName) &&
<UserName>
{firstName}
{" "}
{lastName}
{" "}
{email && <UserEmailInline>{email}</UserEmailInline>}
</UserName>}
{job && <UserJob>{job}</UserJob>}
</UserContentWrapper>
</UserWrapper>
);
User.fragments = {
user: gql`
fragment User on User {
id
firstName
lastName
pictureUrl: avatar
job
color
email
}
`,
};
这里有一些需要做出的选择。似乎大多数示例中都使用了某种约定,但该约定在文档中并不明确。
User.fragments
上使用的 key 。将其命名为与组件的 propName user
完全相同是否有意义?
片段的名称:按照惯例,人们似乎用组件的名称来命名它,如果有用,请在片段所在的 GraphQL 类型后加上后缀。 (这里 UserUser
后缀可能是多余的)。
我认为在同一个应用程序中遵循相同的约定是很好的,这样所有片段声明都是一致的。那么,更有经验的人可以帮我澄清这个在许多 Apollo 示例中使用的约定吗?
现在让我们考虑一个遵循我们设置的约定的Relationship
组件。
const Relationship = ({ user1, user2 }) => (
<RelationshipContainer>
<RelationshipUserContainer>
<User user={user1} />
</RelationshipUserContainer/>
<RelationshipUserContainer>
<User user={user2} />
</RelationshipUserContainer/>
</RelationshipContainer>
);
Relationship.fragments = {
user1: gql`
fragment RelationshipUser1User on User {
...User
}
${User.fragments.user}
`,
user2: gql`
fragment RelationshipUser2User on User {
...User
}
${User.fragments.user}
`,
};
请注意,我在这里声明了 2 个看起来相同的片段。我认为这是必要的,因为有 2 个 props,并且您不必假设这两个 props 的数据要求是相同的。我们可以很容易地想象一个带有 me
属性和 friend
属性的组件,您将在其中收到 me
属性的更多数据。
这工作得很好,但是有很多看起来没有必要的样板文件和中间片段。而且它并不总是很方便,因为从组件用户的角度来看,您必须知道 2 个片段名称才能使用它。
我尝试用以下内容来简化它
Relationship.fragments = {
user1: User.fragments.user,
user2: User.fragments.user,
};
这可以工作,但如果你这样做,那么片段名称不再是RelationshipUserXUser
,而是User
,这意味着它破坏了封装,并且不知何故你需要注意的是,在内部,Relationship
组件正在使用 User
组件。
如果有一天,Relationship
组件切换到使用像 UserAlt
这样的替代表示形式,这将需要使用关系片段对所有组件进行重构,这就是我的做法我想避免。我认为在这种情况下,修改应该只发生在 Relationship
组件中。
我想知道使用 Apollo 组合片段的最佳实践,以便组件保持真正的封装,并且最好不涉及太多样板文件。
我已经在做正确的事情了吗?
如果我真的想编写查询,所有这些样板文件是不可避免的吗?
最佳答案
这样做怎么样:
const userFragment = gql`
fragment Relationship_user on User {
...User_user
}
${User.fragments.user}
`;
Relationship.fragments = {
user1: userFragment,
user2: userFragment,
};
除此之外,我建议您如上所示调整片段名称的范围,因为需要某种名称间距,否则您更有可能会两次使用相同的片段名称。
即
User.fragments.user
=> User_user
Relationship.fragments.user
=> Relationship_user
关于reactjs - Apollo客户端的片段组合: convention and boilerplate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45458428/
我有一个 mysql 表,其中包含一些随机数字组合。为简单起见,以下表为例: index|n1|n2|n3 1 1 2 3 2 4 10 32 3 3 10 4 4
我有以下代码: SELECT sdd.sd_doc_classification, sdd.sd_title, sdd.sd_desc, sdr.sd_upl
如果我有两个要合并的数据框 Date RollingSTD 01/06/2012 0.16 01/07/2012 0.18 01/08/2012 0.17 01/09/20
我知道可以使用 lein ring war 创建一个 war 文件,但它似乎仍然包含码头依赖项。当我构建 war (并在 tomcat 上部署)时,有没有办法排除码头依赖项? 如果我根本不能做这件事,
维基百科关于封装的文章指出: “封装还通过防止用户将组件的内部数据设置为无效或不一致的状态来保护组件的完整性” 我在一个论坛上开始讨论封装,在那里我问你是否应该始终在 setter 和/或 gette
对于我使用的组合框内的复选框: AOEDComboAssociationName = new Ext.form.ComboBox({ id: 'AOEDComboAssociationName',
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How do I combine LINQ expressions into one? public boo
如何在 rust 中找到排列或组合的数量? 例如C(10,6) = 210 我在标准库中找不到这个函数,也找不到那里的阶乘运算符(这就足够了)。 最佳答案 以@vallentin 的回答为基础,可以进
我有一个复杂的泛型类型用例,已在下面进行了简化 trait A class AB extends A{ val v = 10 } trait X[T<:A]{ def request: T }
如何使用 Hibernate 限制来实现此目的? (((A='X') and (B in('X',Y))) or ((A='Y') and (B='Z'))) 最佳答案 思考有效 Criteria c
我一定会在我的一个项目中使用谷歌图表。我需要的是,显示一个条形图,并且在条形图中,与每个条形相交的线代表另一个值。如果您查看下面的 jsfiddle,您会发现折线图仅与中间的条形图相交,并继续向其他条
只是一个简单的问题,我也很想得到答案,因为我不能百分百理解 Javascript 示例:假设您提示用户输入名称。够简单吧?但是你有一个数组,上面写着一些名字(其中之一就是),基本上就是我到目前为止所说
我试图通过 Haskell 理解函数式编程,但在处理函数组合时遇到了很多麻烦。 其实我有这两个功能: add:: Integer -> Integer -> Integer add x y = x
我正在寻找一种在 Realm 查询中组合 AND 和 OR 的方法。 这是我的课: class Event extends RealmObject { String id; String
例如,我有一个包含 5 个元素的哈希: my_hash = {a: 'qwe', b: 'zcx', c: 'dss', d: 'ccc', e: 'www' } 我的目标是每次循环哈希时都返回,但没
我是Combine 的新手,我想得到一个看似简单的东西。假设我有一个整数集合,例如: let myCollection = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 我想以例如 0
关于“优先组合而不是继承”的问题,我的老师是这样说的: 组合:现有类成为新类的组件 转发:新类中的每个实例方法,在现有类的包含实例上调用相应的方法并返回结果 包装器:新类封装了现有的 这三个概念我不是
我正在尝试将单个整数从 ASCII 值转换为 0 和 1。相关代码如下所示: int num1 = bin.charAt(0); int num2 = bin.charAt(1);
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 7 年前。 我经常看到“嵌套”类中的非静态变
我尝试合并两个数据集(DataFrame),如下所示: D1 = pd.DataFrame({'Village':['Ampil','Ampil','Ampil','Bachey','Bachey',
我是一名优秀的程序员,十分优秀!