Question

我正在使用Apollo，React和Graphcool。我有一个查询来获取登录用户ID：

const LoginServerQuery = gql`
    query LoginServerQuery {
        loggedInUser {
            id
        }
    }
`;

我需要在另一个从同一个React组件调用的查询中使用返回的ID。这里我硬编码＆＃34; xxxxxxxxxxxxx＆＃34;这是动态用户ID需要去的地方：

const LocationQuery = gql`
    query LocationsQuery {
        User(id: "xxxxxxxxxxxxx") {
            location {
                name
            }
        }
    }
`;

Answer 1

如果你导入这样的作品：

import { graphql, compose } from 'react-apollo';

然后您可以使用以下内容将道具传递给第二个查询：

const LoginServerQuery = gql`
    query LoginServerQuery {
        loggedInUser {
            id
        }
    }
`;

const LocationsQuery = gql`
    query LocationsQuery($userId: ID) {
        User(id: $userId) {
            name
            location {
                machineName
            }
        }
    }
`;

export default compose(
    graphql(LoginServerQuery, { name: 'LoginServerQuery' }),
    graphql(LocationsQuery, {
        name: 'LocationsQuery',
        options: ownProps => ({
            variables: {
                userId: ownProps.LoginServerQuery.loggedInUser.id,
            },
        }),
    }),
)(LocationsPage);

更新 - 实际上这并不好用。如果我在不同的页面上，我刷新，然后导航到此页面它出错。但是如果我在这个页面上刷新它可以正常工作。

更新 - 我认为这是Graphcool问题。我刷新的另一页也回复了用户。我需要在两个React组件中返回User的ID，否则缓存会变得混乱。添加ID字段后，它现在可以正常工作。

https://www.graph.cool/forum/t/the-store-already-contains-an-id-of/218

Answer 2

这可以如上所述，确保您使用skip属性，因为您的第一个查询最初将是未定义的：

export default compose(
  graphql(firstQuery, {
    name: 'firstQuery'
  }),
  graphql(secondQuery, { 
    name: 'secondQuery',
    skip: ({ firstQuery }) => !firstQuery.data,
    options: ({firstQuery}) => ({
      variables: {
         var1: firstQuery.data.someQuery.someValue
      }
    })
  })
)

见这里：How to chain two GraphQL queries in sequence using Apollo Client

在Apollo Client的第二次查询中使用结果进行第一次查询？

2 个答案: