UseQuery返回另一个useQuery的数据

时间:2020-04-30 12:26:01

标签: reactjs graphql apollo

我在一个React组件中有许多useQueries,有些查询与其他查询有冲突。

以下是我的两个有冲突的查询:

export const GET_CONDITION_STATUS_QUERY = gql`
  query getConditionStatuses($name: String, $orderBy: [Option!]) {
    conditionStatuses(name: $name, orderBy: $orderBy) {
      id
      name
      idName
    }
  }
`;
export const GET_CONDITION_TARGETING_QUERY = gql`
  query getConditionTargetings($name: String, $orderBy: [Option!]) {
    conditionTargetings(name: $name, orderBy: $orderBy) {
      id
      name
      idName
    }
  }
`;

问题是,当conditionStatuses被加载到数据中时,它返回正常的conditionStatuses's数据,但是在加载conditionTargetings之后,我在{{1}中得到了conditionTargetings's数据} useQuery。

这是useQuery的代码

conditionStatuses
import { useMemo } from 'react';
import { ISelectData } from '@erp-client/components';
import { useQuery } from '@apollo/react-hooks';
import { GET_CONDITION_STATUS_QUERY } from '../gql/queries';

export const useConditionStatuses = (): [ISelectData[], boolean] => {
  const { loading, data } = useQuery<{ conditionStatuses: ISelectData[] }>(GET_CONDITION_STATUS_QUERY, {
    variables: {
      name: null,
      orderBy: [],
    },
  });

  return useMemo(() => {
    let conditionStatus: ISelectData[] = [];
    if (data && data.conditionStatuses) {
      conditionStatus = data.conditionStatuses.map(node => ({
        ...node,
        id: Number(node.id),
        value: Number(node.id),
        text: node.name,
      }));
    }
    console.log(data, 'conditionStatuses');
    return [conditionStatus, loading];
  }, [data, loading]);
};

以下是屏幕快照,其中日志显示在顶部import { useMemo } from 'react'; import { ISelectData } from '@erp-client/components'; import { useQuery } from '@apollo/react-hooks'; import { GET_CONDITION_TARGETING_QUERY } from '../gql/queries'; export const useConditionTargetings = (): [ISelectData[], boolean] => { const { loading, data } = useQuery<{ conditionTargetings: ISelectData[] }>(GET_CONDITION_TARGETING_QUERY, { variables: { name: null, orderBy: [], }, }); return useMemo(() => { let conditionTargeting: ISelectData[] = []; if (data && data.conditionTargetings) { conditionTargeting = data.conditionTargetings.map(node => ({ ...node, id: Number(node.id), value: Number(node.id), text: node.name, })); } return [conditionTargeting, loading]; }, [data, loading]); }; 日志中,您可以看到正常的conditionStatuses数据,底部则看到conditionStatuses数据

https://user-images.githubusercontent.com/6962834/80688537-0258c900-8add-11ea-98f1-9a24f1b30b46.png

此外,我尝试将这些查询分组

conditionTargetings

响应正常:

https://user-images.githubusercontent.com/6962834/80703642-32f82d00-8af4-11ea-9035-f9cf1a2bf4b0.png

但是console.log很奇怪:

query getConditionStatusTargetingType($name: String, $orderBy: [Option!]) {
    conditionTargetings(name: $name, orderBy: $orderBy) {
      id
      name
      idName
    }
    possibleStatuses(name: $name, orderBy: $orderBy) {
      id
      name
      idName
    }
    conditionTypes(name: $name, orderBy: $orderBy) {
      id
      name
      idName
    }
    productSettings(name: $name) {
      id
      name
      idName
    }
  }

https://user-images.githubusercontent.com/6962834/80703733-62a73500-8af4-11ea-8d64-3ce63ba8dfef.png

这是一个非常奇怪的错误:(

0 个答案:

没有答案