Related attribute __typename and name are different when used GraphQL API

[TaniaUdomsri]

I have a few navigation items that have incorrect __typename and name when used GraphQL API. I'd say 3 out of 8 items are incorrect. For example, the item below has Content type Page and Entity Page layouts.

However, when queried from the frontend. It returned as __typename Foundation and name Inclusivity. This attribute is from another navigation item.

Here is the query I use:

query getNavigation ($name: String!) {
  renderNavigation(
    navigationIdOrSlug: $name
    type: TREE
    menuOnly: false
  ) {
    id
    title
    path
    related {
      id
      attributes {
        __typename
        ... on Component {
          name
        }
        ... on Foundation {
          name
        }
        ... on Pattern {
          name
        }
        ... on Page {
          name
        }
      }
    }
    items {
      id
      title
      path
      related {
        id
        attributes {
          __typename
          ... on Component {
            name
          }
          ... on Foundation {
            name
          }
          ... on Pattern {
            name
          }
          ... on Page {
            name
          }
        }
      }
      items {
        id
        title
        path
        related {
          id
          attributes {
            __typename
            ... on Component {
              name
            }
            ... on Foundation {
              name
            }
            ... on Pattern {
              name
            }
            ... on Page {
              name
            }
          }
        }
      }
    }
  }
}

Anything I should look into to fix this issue? Note, I have put navigation above graphQL in plugin config.

[cyp3rius]

Checking

[cyp3rius]

@TaniaUdomsri I'm trying to reproduce your issue but I can't get to the state with mixed types you provided.

  renderNavigation(
    navigationIdOrSlug: "main-navigation"
    type: TREE
    menuOnly: false
  ) {
    id
    title
    path
    related {
      id
      attributes {
        __typename

        ... on Page {
          Title
        }

        ... on WithFlowType {
          Name
        }

        ... on NoFlowType {
          Name
        }
      }
    }
    items {
      id
      title
      path
      items {
        id
        title
        path
        related {
          id
          attributes {
            __typename

            ... on Page {
              Title
            }

            ... on WithFlowType {
              Name
            }

            ... on NoFlowType {
              Name
            }
          }
        }
      }
      related {
        id
        attributes {
          __typename

          ... on Page {
            Title
          }

          ... on WithFlowType {
            Name
          }

          ... on NoFlowType {
            Name
          }
        }
      }
    }
  }
}

Response

  "data": {
    "renderNavigation": [
      {
        "id": 1,
        "title": "Test",
        "path": "/test",
        "related": {
          "id": 1,
          "attributes": {
            "__typename": "Page",
            "Title": "Test page"
          }
        },
        "items": [
          {
            "id": 2,
            "title": "External item",
            "path": "https://example.com",
            "items": null,
            "related": null
          },
          {
            "id": 3,
            "title": "Another",
            "path": "/test/another",
            "items": [
              {
                "id": 6,
                "title": "Nested",
                "path": "/test/another/test",
                "related": {
                  "id": 4,
                  "attributes": {
                    "__typename": "Page",
                    "Title": "Nested page"
                  }
                }
              },
              {
                "id": 7,
                "title": "Another nested",
                "path": "/test/another/another-nested",
                "related": {
                  "id": 5,
                  "attributes": {
                    "__typename": "Page",
                    "Title": "another nested page"
                  }
                }
              },
              {
                "id": 8,
                "title": "With flow",
                "path": "/test/another/with-flow",
                "related": {
                  "id": 1,
                  "attributes": {
                    "__typename": "WithFlowType",
                    "Name": "Test with flow"
                  }
                }
              }
            ],
            "related": {
              "id": 2,
              "attributes": {
                "__typename": "Page",
                "Title": "Another page"
              }
            }
          },
          {
            "id": 5,
            "title": "Yet another page",
            "path": "/test/yet-another",
            "items": [
              {
                "id": 11,
                "title": "Blog post",
                "path": "/test/yet-another/post-1",
                "related": {
                  "id": 1,
                  "attributes": {
                    "__typename": "BlogPost"
                  }
                }
              },
              {
                "id": 10,
                "title": "blog post 2",
                "path": "/test/yet-another/post-2",
                "related": {
                  "id": 2,
                  "attributes": {
                    "__typename": "BlogPost"
                  }
                }
              }
            ],
            "related": {
              "id": 3,
              "attributes": {
                "__typename": "Page",
                "Title": "And yet another"
              }
            }
          }
        ]
      }
    ]
  }
}```

Is this still happening? Your query looks proper.

[TaniaUdomsri]

Hi @cyp3rius,

Thanks for taking a look at the issue. Yes, this is still happening. I understand this is a super weird bug. I'd like to point out this is only happening while using Apollo's useQuery hook. However, the data returns correctly while testing on GraphQL playground.

[cyp3rius]

So I think the difference and possible issue might be somewhere in the Apollo hook itself, some kind of configuration or properties of it. Have you played a bit with it?

[TaniaUdomsri]

I've been trying to use useLazyQuery instead to wait for other queries and components to finished with no luck. Not sure what else to look for or where to start in this case. We have been using it for other queries for Strapi without any issues. Any advice?

[c3s4]

Hi,
the same thing happened to me, I digged into database and everything was ok, then, as suggested here, I tried to issue the query manually (using playground) and the response is totally fine.

I'm not using the hook but the query method of the ApolloClient class. There I can use an option to disable caching and i worked.

This option

fetchPolicy: "no-cache",

as value in the option object, fixed this problem.

To be honest I haven't figured it out yet why this happen, I just have some thoughts.

Hope this help