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

时间:2019-03-15 10:29:29

标签: reactjs graphql react-apollo

我正在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 可以合并这些查询吗?

1 个答案:

答案 0 :(得分: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
    }
  }
`;