在使用Apollo客户端的第二个查询中使用第一个查询的结果？

本文是小编为大家收集整理的关于在使用Apollo客户端的第二个查询中使用第一个查询的结果？的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

我使用apollo，反应和graphcool.我有一个查询来获取登录用户ID:

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

我需要在另一个查询中使用返回的ID，从同一反应组件调用.这里，IVE硬编码的"xxxxxxxxxxxx"，它是动态用户ID需要去的地方:

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

推荐答案

如果您导入撰写如此:

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

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

更新 - 我认为这是一个图表问题.我刷新的另一个页面也返回用户.我需要在反应组件中返回用户的ID，否则缓存会困惑.添加ID字段后，它现在正常工作.

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

其他推荐答案

这可以按照上面完成，确保您使用Skip属性，因为您的第一个查询最初将未定义:

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

请参阅这里:如何使用apollo client 序列连锁两个GraphQL查询

本文地址：https://www.itbaoku.cn/post/1938124.html

百度翻译此文有道翻译此文

问题描述

Im using Apollo, React and Graphcool. I have a query to get the logged in users ID:

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

I need to use the returned ID in another query which is called from the same React component. Here Ive hardcoded "xxxxxxxxxxxxx" which is where the dynamic user ID needs to go:

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

推荐答案

If you import compose like so:

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

Then you can pass the props to the second query with this:

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

UPDATE - Actually this isn't working well. If Im on a different page, I refresh, then navigate to this page it errors. However If I then refresh when on this page it works fine.

UPDATE - I think it was a Graphcool issue. The other page that I was refreshing on was also returning the User. I needed to return the ID for the User in both React components, otherwise the caching got confused. After adding the ID field it now works.

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

其他推荐答案

This can be done as above, ensure you use skip property as your first query will be undefined initially:

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

See here: How to chain two GraphQL queries in sequence using Apollo Client

上一篇：阿波罗客户端。变量未被定义。收到状态代码400

下一篇：操作未定义的GraphQL-变量