UseQuery возвращает данные другого useQuery - PullRequest
Новая
       22

UseQuery возвращает данные другого useQuery

0 голосов
/ 30 апреля 2020

У меня много useQueries в одном компоненте React, некоторые запросы конфликтуют с другими запросами.

Это мои два запроса, которые имеют конфликт: 

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 я получаю conditionTargetings's данные в conditionStatuses useQuery.

Вот код 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

Это очень странная ошибка: (

...