reactjs - UseQuery 返回另一个 useQuery 的数据

Question

我在一个 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加载后，我在useQuery 中获取conditionTargetings's数据。conditionStatuses

这是useQuery的代码

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数据，底部您将看到conditionTargetings数据

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

另外，我尝试对这些查询进行分组

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/80703642-32f82d00-8af4-11ea-9035-f9cf1a2bf4b0.png

但是 console.log 很奇怪：

const { loading, data: dataa } = useQuery<{
    conditionTypes: ISelectData[];
    possibleStatuses: ISelectData[];
    conditionTargetings: ISelectData[];
    productSettings: ISelectData[];
  }>(GET_CONDITION_TARGETING_STATUS_TYPE_PRODUCT_SETTINGS_QUERY, {
    variables: {
      name: null,
      orderBy: [],
    },
  });

  console.log(dataa);

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

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

标签： reactjsgraphqlapollo