{ apollo-client, react, grapgql } 处理多重加载的好方法是什么？

Question

我在 Node.js
上使用带有 graphql 的 react 和 apollo-client 我有调用三个查询的组件

所以我有三个这样的加载

function MyComponent({
  IsLoggedIn: { auth: { isLoggedIn } = {}, loading } = {},
  GetUserInfo: { GetMyProfile: { user } = {}, loading: loading2 } = {},
  lastSelectedHouse: { auth: { lastSelectedHouse } = {}, loading: loading3 } = {},
}) (
{ (!loading && !loading2 && !loading3) ? <MyComponent {...props} > : "loading"  }
)

export default compose(
  graphql(SELECTED_HOUSE, { name: 'lastSelectedHouse' }),
  graphql(IS_LOGGED_IN, { name: 'IsLoggedIn' }),
  graphql(GET_USER_INFO, {name: 'GetUserInfo'})
)(JDmiddleServer);

我不想处理三个加载我怎样才能组合主题？

这是我的查询

export const IS_LOGGED_IN = gql`
  {
    auth {
      isLoggedIn @client
    }
  }
`;
export const SELECTED_HOUSE = gql`
  {
    auth {
      lastSelectedHouse @client {
        label
        value
      }
    }
  }
`;

export const GET_USER_INFO = gql`
  query {
    GetMyProfile {
      user {
        _id
        name
        phoneNumber
        password
        email
        isPhoneVerified
        checkPrivacyPolicy
    }
  }
`;

是的。两个查询用于@client，一个用于@server 是否可以合并这些查询？

Answer 1

是的，即使一个用于服务器，两个用于客户端，也可以合并查询。

像这样的东西应该可以工作：

export const GET_USER_INFO = gql`
  {
    auth {
      isLoggedIn @client
      lastSelectedHouse @client {
        label
        value
      }
    }
  }
  query {
    GetMyProfile {
      user {
        _id
        name
        phoneNumber
        password
        email
        isPhoneVerified
        checkPrivacyPolicy
    }
  }
`;

根据您的架构和解析器，您应该能够设计如下更好的内容。

查看合并查询的文档：https://www.apollographql.com/docs/link/links/state.html#combine

export const GET_USER_INFO = gql`
  query {
    GetMyProfile {
      user {
        isLoggedIn @client
        lastSelectedHouse @client {
            label
            value
        }
        _id
        name
        phoneNumber
        password
        email
        isPhoneVerified
        checkPrivacyPolicy
    }
  }
`;

{ apollo-client, react, grapgql } 处理多重加载的好方法是什么？

{ apollo-client, react, grapgql } what is good way handle multiple loadings?

reactjs

graphql

react-apollo