apollo-client - 在 Apollo Client 的第二个查询中使用第一个查询的结果？

Question

我使用 Apollo、React 和 Graphcool。我有一个查询来获取登录的用户 ID:

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

我需要在从同一个 React 组件调用的另一个查询中使用返回的 ID。这里我硬编码了“xxxxxxxxxxxxx”，这是动态用户 ID 需要去的地方:

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

Answer 1

如果您像这样导入 compose:

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

然后你可以将 Prop 传递给第二个查询:

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 组件中返回用户的 ID，否则缓存会变得困惑。添加 ID 字段后，它现在可以工作了。

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