使用Apollo与AWS AppSync时GraphQL查询仅成功一次后失败

Hey there, let's break down how to set up your AWS AppSync Client with Redux's <Provider> instead of relying on the <Rehydrated> component. I've worked through this exact scenario before, so here's a clear, actionable solution:

The <Rehydrated> component from the AppSync SDK handles cache state restoration, but when using Redux, we can replace that with a manual cache hydration step and wrap our app with Redux's <Provider> alongside Apollo's provider (since AppSync is built on Apollo Client).

1. Initialize the AWS AppSync Client #

Start with the base client config from the repo, no <Rehydrated> dependencies needed here:

import AWSAppSyncClient from 'aws-appsync';
import appSyncConfig from './aws-exports'; // Your auto-generated AppSync config file
import { InMemoryCache } from '@apollo/client';

const client = new AWSAppSyncClient({
  url: appSyncConfig.graphqlEndpoint,
  region: appSyncConfig.region,
  auth: {
    type: appSyncConfig.authenticationType,
    apiKey: appSyncConfig.apiKey, // Swap this for your auth type's credentials (e.g., Cognito details if using user pools)
  },
  // Optional but recommended: Use Apollo's InMemoryCache for consistent caching
  cache: new InMemoryCache(),
});

2. Configure Your Redux Store #

Set up your Redux store as you normally would—no special changes needed for AppSync unless you want to integrate its state (which isn't required for basic use cases):

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// Import your custom reducers
import appReducer from './reducers/appReducer';

const rootReducer = combineReducers({
  appState: appReducer,
  // Add other reducers here as needed
});

// Create the store with your preferred middleware
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

3. Wrap Your App with Redux <Provider> #

In your app's entry file (usually index.js), we'll handle cache hydration manually (to replace <Rehydrated>) and wrap everything with Redux's provider plus Apollo's provider (required for AppSync hooks to work):

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { ApolloProvider } from '@apollo/client';
import App from './App';
import store from './store';
import client from './appSyncClient';

const root = ReactDOM.createRoot(document.getElementById('root'));

// Manually hydrate AppSync cache before rendering (replaces <Rehydrated>)
client.hydrate().then(() => {
  root.render(
    <React.StrictMode>
      <Provider store={store}>
        <ApolloProvider client={client}>
          <App />
        </ApolloProvider>
      </Provider>
    </React.StrictMode>
  );
});

• Don't skip ApolloProvider: Since AWS AppSync Client is built on top of Apollo Client, you need to wrap your app with <ApolloProvider> to make the client available to components using useQuery, useMutation, etc.
• Auth type flexibility: If you're using an auth method other than API_KEY (like Amazon Cognito User Pools), update the auth object in your AppSync client config with the correct credentials (e.g., userPoolId and userPoolWebClientId).
• Cache hydration: The client.hydrate() call ensures any cached AppSync data is restored before the app renders, just like <Rehydrated> would—this prevents flicker or stale state issues.

内容的提问来源于stack exchange，提问作者reggie3