Problem with query using useQuery hook and multiple fragments

Help
,
1

Our backend has provided us with a schema that uses fragments. I’m using the useQuery hook to make the call. The query looks like this:

export const GET_CHILD_MENUS = gql`
  fragment item on IndexedItem {
    id
    title
  }

  fragment childMenus on Menus {
    schoolGrades {
      ...item
    }
    languageAbilities {
      ...item
    }
    concerns {
      ...item
    }
    diagnoses {
      ...item
    }
  }

  query AddChildMenus_v1 {
    menus {
      ...childMenus
    }
  }
`

and the query is straight forward:

const [ data, loading, error ] = useQuery(GET_CHILD_MENUS)

The data object gives menus and then the 4 fragment groups under childMenus. The problem is that all the array of objects are the last one - diagnoses. It overwrites the first 3. So the final object looks like:

![Screen Shot 2022-03-02 at 10.25.12 AM|374x500](upload://lcNH2TLJ1SbBlQLIVxQpaHGhf7I.png)

https://imgur.com/a/zXolVPX
2

Answering my own issue, it turns out to be a cache issue. Adding fetchPolicy: 'no-cache' to the query fixed it.

3

Glad to hear you fixed your issue, i just want to give some context on why this is happening. Apollo client assumes that the combination of __typename + id is globally unique, and uses this combination of these two fields to index your data. If you have two different pieces of data that both have the same __typename and the same id, then one will overwrite the other in the cache. This behavior can be customized in various ways: Configuring the Apollo Client cache - Apollo GraphQL Docs