1

I'm attempting to load information about a type in 2 steps (since the info I'm asking for in secondQuery will take some time to load):

Component:

const MyComponent = ({startDate}) => {
  const firstQuery = useQuery(
    GET_INFO_PART_ONE,
    {
     variables: {startDate}
    }
  );

  const secondQuery = useQuery(
    GET_INFO_PART_TWO,
    {
     variables: {startDate}
    }
  );
}

Queries:

export const GET_INFO_PART_ONE = gql`
  query getInfoPartOne(
    $startDate: DateTime!
  ) {
    infoPageResults(
      startDate: $startDate
    ) {
      edges {
        info {
          infoID
          infoFieldOne
          infoFieldTwo
          infoFieldThree
        }
      }
    }
  }
`;

export const GET_INFO_PART_TWO = gql`
  query getInfoPartTwo(
    $startDate: DateTime!
  ) {
    infoPageResults(
      startDate: $startDate
    ) {
      edges {
        info {
          infoID
          infoFieldFour{
            netRate
          }
        }
      }
    }
  }
`;

When I do this and both queries resolve, the cache's ROOT_QUERY includes the data as I would expect it, with infoPageResults containing an array of edges where each edge's info __typename includes the fields specified in the GET_INFO_PART_ONE and GET_INFO_PART_TWO queries. I would then expect firstQuery.data.infoPageResults.edges in the above component to include the fields loaded from the second query.

The Problem

After both firstQuery and secondQuery are finished loading, firstQuery.data.infoPageResults.edges does not contain the fields loaded by secondQuery, even though the cached values look as I would expect them.

  1. Is there something obvious I'm misunderstanding about how the query hooks work?
  2. Is there a better strategy for loading additional fields onto a _typename in 2 steps?
jolavb
  • 11
  • 1

1 Answers1

0

Just caches what was queried ... no node entries cached (additionally, separately - as cache is normalizing cache), because no id field (required by default as unique entry id) ... it can be customized to use infoID for info type (see docs).

Properly cached node (info) entries can be used to display node details (from 1st query) on 2nd query result rendering list ... using additional 'cache-only' policy queries (info node by id) in subcomponents (react).

Start with more standard example/tutorial to explore possibilities.

update

No, data fetched separately are accessible separately ... it's not cache problem and not querying problem...

  • 1st query won't return fields/properties fetched in 2nd query ... by design;
  • list rendered using 1st result won't be refreshed when 2nd query result will arrive ... if doesn't contain ref/not consume 2nd data;

You can use/pass both data in parallel or combine them (in immutable way) before passing to some view component ('Presentational and Container Component Pattern') ... list can be rendered using one prop and updated when 2nd prop changes.

xadm
  • 8,219
  • 3
  • 14
  • 25
  • Thanks for the response but I'm not exactly sure what you're suggesting here. The `InMemoryCache` of the client is configured to use `infoID` rather than the default `id` field via the `dataIdFromObject` config option. If I want all details (loaded from 1st and 2nd queries) of all `info` pageResults are you suggesting I add a 3rd query with a cache-only policy? – jolavb Sep 27 '20 at 18:45
  • ... you should mention about all non-standard config/usage ... and describe how you're passing or render this data ... and what is not updated ... – xadm Sep 27 '20 at 19:10
  • Fair enough. Thanks for this answer. Sounds like it's a core misunderstanding on my part about how the query hooks work. – jolavb Sep 27 '20 at 21:06