使用后续突变和缺失片段中继 commitUpdate 回调

Question

我有两个单独工作的 GraphQL/Relay 突变。第一个创建一个项目。第二个运行一个连接两个项目的过程。

GraphQL

createOrganization(
  input: CreateOrganizationInput!
): CreateOrganizationPayload

createOrganizationMember(
  input: CreateOrganizationMemberInput!
): CreateOrganizationMemberPayload

input CreateOrganizationInput {
  clientMutationId: String
  organization: OrganizationInput!
}

input CreateOrganizationMemberInput {
  clientMutationId: String
  organizationMember: OrganizationMemberInput!
}

# Represents a user’s membership in an organization.
input OrganizationMemberInput {
  # The organization which the user is a part of.
  organizationId: Uuid!

  # The user who is a member of the given organization.
  memberId: Uuid!
}

type CreateOrganizationPayload {
  clientMutationId: String

  # The `Organization` that was created by this mutation.
  organization: Organization

  # An edge for our `Organization`. May be used by Relay 1.
  organizationEdge(
    orderBy: OrganizationsOrderBy = PRIMARY_KEY_ASC
  ): OrganizationsEdge

  # Our root query field type. Allows us to run any query from our mutation payload.
  query: Query
}

我希望能够运行createOrganization 突变，然后使用createOrganizationMember 突变将用户连接到组织。第二个突变有两个参数，其中一个是新创建的边。

我尝试将边缘传递给突变，但它希望突变能够getFragment。如何获取有效负载边缘的片段，以便将其传递到突变中？

反应中继

Relay.Store.commitUpdate(
      new CreateOrganizationMutation({
        organizationData: data,
        user,
        query,
      }), {
        onSuccess: response => {
          Relay.Store.commitUpdate(
            new CreateOrganizationMemberMutation({
              organization: response.createOrganization.organizationEdge.node,
              user,
            })
          );
        },
      }
    );

  fragments: {
    user: () => Relay.QL`
      fragment on User {
        ${CreateOrganizationMutation.getFragment('user')},
        ${CreateOrganizationMemberMutation.getFragment('user')},
      }
    `,

Answer 1

我在不更改任何 GraphQL 的情况下解决了这个问题：

我创建了一个新的中继容器、路由和查询对象。它被配置为 发生两个突变中的第一个的容器的子路由。 id 为 新边通过路由路径名作为参数传递。路由器状态 变量也被传递。

路线

import {Route} from 'react-router';

function prepareProfileParams (params, {location}) {
  return {
    ...params,
    userId: localStorage.getItem('user_uuid'),
  };
}
    // ProfileContainer has the component CreateOrganizationForm, which calls
    // the createOrganization mutation
    <Route
      path={'profile'}
      component={ProfileContainer}
      queries={ProfileQueries}
      prepareParams={prepareProfileParams}
      onEnter={loginBouncer}
      renderLoading={renderLoading}
    >
      <Route path={'join-organization'}>
        <Route
          path={':organizationId'}
          component={JoinOrganizationContainer}
          queries={JoinOrganizationQueries}
          renderLoading={renderLoading}
        />
      </Route>
    </Route>

CreateOrganizationForm.js

    Relay.Store.commitUpdate(
      new CreateOrganizationMutation({
        organizationData: data,
        user,
        query,
      }), {
        onSuccess: response => {
          const organizationId = response.createOrganization.organizationEdge.node.rowId;
          router.push({
            pathname: `/profile/join-organization/${organizationId}`,
            state: {
              isAdmin: true,
            },
          });
        },
      }
    );

新的 Relay 容器 JoinOrganizationContainer 将挂钩到生命周期 方法来调用我们需要的第二个突变。第二个突变有一个 onSuccess 回调，它为我们的新对象执行 router.push 到页面 使用第一个突变创建。

JoinOrganizationContainer.js

    import React from 'react';
    import Relay from 'react-relay';
    import CreateOrganizationMemberMutation from './mutations/CreateOrganizationMemberMutation';

    class JoinOrganizationContainer extends React.Component {
      static propTypes = {
        user: React.PropTypes.object,
        organization: React.PropTypes.object,
      };
      static contextTypes = {
        router: React.PropTypes.object,
        location: React.PropTypes.object,
      };
      componentWillMount () {
        const {user, organization} = this.props;
        const {router, location} = this.context;

        Relay.Store.commitUpdate(
          new CreateOrganizationMemberMutation({
            user,
            organization,
            isAdmin: location.state.isAdmin,
          }), {
            onSuccess: response => {
              router.replace(`/organization/${organization.id}`);
            },
          }
        );
      }
      render () {
        console.log('Joining organization...');
        return null;
      }
    }

    export default Relay.createContainer(JoinOrganizationContainer, {
      initialVariables: {
        userId: null,
        organizationId: null,
      },
      fragments: {
        user: () => Relay.QL`
          fragment on User {
            ${CreateOrganizationMemberMutation.getFragment('user')},
          }
        `,
        organization: () => Relay.QL`
          fragment on Organization {
            id,
            ${CreateOrganizationMemberMutation.getFragment('organization')},
          }
        `,
      },
    });

JoinOrganizationQueries.js

    import Relay from 'react-relay';

    export default {
      user: () => Relay.QL`
        query { userByRowId(rowId: $userId) }
      `,
      organization: () => Relay.QL`
        query { organizationByRowId(rowId: $organizationId) }
      `,
    };

以这种方式做事的一个意想不到的好处是，现在有一个可共享的 url，可用作加入此应用中的组织的邀请链接。如果用户已登录并转到链接：<host>/profile/join-organization/<organizationRowId>，则将运行突变以将该人加入为成员。在此用例中，router.state.isAdmin 是 false，因此新成员身份将作为管理员禁用。