CODEWITHSUNDEEP
reactjsgraphqlreact-apollo
MINJA KIM
MINJA KIM

Reputation: 1008

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

i am using react and apollo-client with graphql on Node.js
i have component which call three Query

so i have three loading like this

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);

i don't wan't handle three loading how can i combine theme?

here is my Queries

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
    }
  }
`;

Yes. two Query is for @client and one is for @server is it possible merge these Queries?

Upvotes: 0

Views: 198

Answers (1)

Alexander
Alexander

Reputation: 695

Yes, it's possible to combine the queries even though one is for the server and two for the client.

Something like this should work:

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

Depending on your schema and resolvers you should be able to design something like below which would be better.

Check the docs for combining queries: 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
    }
  }
`;

Upvotes: 1

Related Questions