如何使用apollo-link-state模拟查询？附react-apollo常规查询模拟示例

Hey, great question! Since you're already familiar with mocking using graphql-tools, switching to apollo-link-state is about shifting the mock logic to the client-side state layer. Here's how to do it step by step:

1. Set Up Dependencies #

First, make sure you have the required packages (you might already have most of these, but just double-check):

npm install apollo-link-state apollo-client apollo-cache-inmemory react-apollo graphql graphql-tag

2. Define Client-Side Resolvers & Mock Logic #

Instead of relying on addMockFunctionsToSchema, you'll create client-side resolvers that directly return your mock data. This tells Apollo Client to handle the query locally, no remote server required.

Here's how to adapt your existing example:

import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { withClientState } from 'apollo-link-state';
import { ApolloLink } from 'apollo-link';
import gql from 'graphql-tag';

// Define your query with the @client directive (critical for local handling)
const GET_MODEL = gql`
  query GetModel($modelId: ID!) {
    model(modelId: $modelId) @client {
      id
      __typename
    }
  }
`;

// 1. Create client-side resolvers for your mock data
const resolvers = {
  Query: {
    model: (_, { modelId }) => {
      // Return custom mock data here—you can add logic too!
      return {
        __typename: 'Model',
        id: modelId || 'mock-model-123',
        // Add any other fields you need to mock (e.g., name, createdAt)
      };
    },
  },
};

// 2. Optional: Set default state if you need preloaded mock data
const defaults = {
  // Example: Preload a default model
  // model: { __typename: 'Model', id: 'default-mock-id' }
};

// 3. Create the client state link
const stateLink = withClientState({
  cache: new InMemoryCache(),
  resolvers,
  defaults,
});

// 4. Initialize Apollo Client with the state link
const client = new ApolloClient({
  link: ApolloLink.from([stateLink]),
  cache: new InMemoryCache(),
});

3. Use the Mocked Query in Your Component #

Now you can use the query just like you would with a remote API—Apollo will automatically use your client resolver to return mock data:

import { Query } from 'react-apollo';

function ModelComponent({ modelId }) {
  return (
    <Query query={GET_MODEL} variables={{ modelId }}>
      {({ loading, data }) => {
        if (loading) return <div>Loading mock data...</div>;
        return <div>Mock Model ID: {data.model.id}</div>;
      }}
    </Query>
  );
}

// Wrap your app with the ApolloProvider
function App() {
  return (
    <ApolloProvider client={client}>
      <ModelComponent modelId="custom-mock-id" />
    </ApolloProvider>
  );
}

Key Differences from graphql-tools Mocking #

• apollo-link-state treats mock data as client-side state, so you don't need to build an executable schema or modify remote schema logic.
• The @client directive in your query tells Apollo to skip the remote server and use your local resolver instead.
• You have full control over resolver logic—you can simulate errors, return conditional mock data, or even sync mock data with other client state.

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