AWS Appsync GraphQL query silently failing though successful 200 response

Question

I have one React Amplify app running with two environments. One environment is for my wife's blog (www.riahraineart.com) and one for my blog (www.joshmk.com). Both sites are running off the same repo, I'm just configuring the site's differently based on an environment variable I use to retrieve their configurations from a table.

  useEffect(() => {
    async function fetchData() {
      const configData = await API.graphql({
        query: queries.getConfiguration,
        variables: { id: process.env[configIdName] },
      });
      if (configData && isMounted.current)
        setConfig(configData.data.getConfiguration || {});
    }
    if (process.env[configIdName]) {
      fetchData();
    }
  }, [isMounted, configIdName]);

For my site, when I make the GraphQL request for this configuration, it's successful and the site spins up. For my wife's site, this call to the configurations table silently fails. By silent, I mean there's no helpful response being returned from the API even though it's a successful 200 response.

When I open AppSync, go to the two environments and run the queries, I receive the configuration items. I also see them when I open dynamodb.

I'm thinking there could be some expired token for something somewhere but if that was the case, I would think I'd receive a failed response that would state that.

Another possibility could be that my wife had modified the configuration of her site or created a post with some content that the frontend doesn't expect. But in that case, I would atleast expect to see a response from the call to receive her sites configuration.

Thank you beforehand for any insights here!

Answer 1

I fixed it! Unfortunately, the solution was pretty specific to my situation so it may not provide too much value for others. Although, I hope it helps with troubleshooting.

After locally switching my backend configuration over to her site using amplify pull --appId <appId> --envName <envName> I noticed that the configuration call was now successful. I had forgotten that I had never actually run her site locally, I only hopped to her branch to merge and push.

The site was still not rendering though, which perked my ears for a race condition. I discovered that I had left a checker for some images that was gating render of my topmost component. My wife has a ton of images, so I think this call was taking too long to make the chain of events load items in the correct order, and the page showed blank. Simply removing that check for those images at that point, showed the UI.