核心分页 API

1
const FEED_QUERY = gql`
2
  query Feed($offset: Int, $limit: Int) {
3
    feed(offset: $offset, limit: $limit) {
4
      id
5
      # ...
6
    }
7
  }
8
`;
9

10
const FeedWithData() {
11
  const { loading, data, fetchMore } = useQuery(FEED_QUERY, {
12
    variables: {
13
      offset: 0,
14
      limit: 10
15
    },
16
  });
17
  // ...continues below...
18
}

1
const FeedWithData() {
2
// ...continuing from above...
3

4
// If you want your component to rerender with loading:true whenever
5
// fetchMore is called, add `notifyOnNetworkStatusChange:true` to the
6
// options you pass to useQuery.
7
if (loading) return 'Loading...';
8

9
return (
10
    <Feed
11
      entries={data.feed || []}
12
      onLoadMore={() => fetchMore({
13
        variables: {
14
          offset: data.feed.length
15
        },
16
      })}
17
    />
18
  );
19
}

1
type Query {
2
  user(id: ID!): User
3
}

1
query GetUser($id: ID!) {
2
  user(id: $id) {
3
    id
4
    name
5
  }
6
}

1
query Feed($offset: Int, $limit: Int) {
2
  feed(offset: $offset, limit: $limit) {
3
    id
4
    # ...
5
  }
6
}

1
type Query {
2
  feed(offset: Int, limit: Int): [FeedItem!]
3
}
4

5
type FeedItem {
6
  id: String!
7
  message: String!
8
}

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Query: {
4
      fields: {
5
        feed: {
6
          // Don't cache separate results based on
7
          // any of this field's arguments.
8
          keyArgs: false,
9

10
          // Concatenate the incoming list items with
11
          // the existing list items.
12
          merge(existing = [], incoming) {
13
            return [...existing, ...incoming];
14
          },
15
        }
16
      }
17
    }
18
  }
19
})

1
// Client-side query definition
2
const FEED_QUERY = gql`
3
  query Feed($offset: Int, $limit: Int) {
4
    feed(offset: $offset, limit: $limit) {
5
      id
6
      message
7
    }
8
  }
9
`;

1
merge(existing = [], incoming) {
2
  return [...existing, ...incoming];
3
}

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Query: {
4
      fields: {
5
        feed: {
6
          keyArgs: false,
7
          merge(existing, incoming, { args: { offset = 0 }}) {
8
            // Slicing is necessary because the existing data is
9
            // immutable, and frozen in development.
10
            const merged = existing ? existing.slice(0) : [];
11
            for (let i = 0; i < incoming.length; ++i) {
12
              merged[offset + i] = incoming[i];
13
            }
14
            return merged;
15
          },
16
        },
17
      },
18
    },
19
  },
20
});

1
fetchMore({
2
  variables: { offset: data.feed.length },
3
  updateQuery(previousData, { fetchMoreResult, variables: { offset }}) {
4
    // Slicing is necessary because the existing data is
5
    // immutable, and frozen in development.
6
    const updatedFeed = previousData.feed.slice(0);
7
    for (let i = 0; i < fetchMoreResult.feed.length; ++i) {
8
      updatedFeed[offset + i] = fetchMoreResult.feed[i];
9
    }
10
    return { ...previousData, feed: updatedFeed };
11
  },
12
})

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Query: {
4
      fields: {
5
        feed: {
6
          read(existing, { args: { offset, limit }}) {
7
            // A read function should always return undefined if existing is
8
            // undefined. Returning undefined signals that the field is
9
            // missing from the cache, which instructs Apollo Client to
10
            // fetch its value from your GraphQL server.
11
            return existing && existing.slice(offset, offset + limit);
12
          },
13

14
          // The keyArgs list and merge function are the same as above.
15
          keyArgs: [],
16
          merge(existing, incoming, { args: { offset = 0 }}) {
17
            const merged = existing ? existing.slice(0) : [];
18
            for (let i = 0; i < incoming.length; ++i) {
19
              merged[offset + i] = incoming[i];
20
            }
21
            return merged;
22
          },
23
        },
24
      },
25
    },
26
  },
27
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Query: {
4
      fields: {
5
        feed: {
6
          read(existing, {
7
            args: {
8
              // Default to returning the entire cached list,
9
              // if offset and limit are not provided.
10
              offset = 0,
11
              limit = existing?.length,
12
            } = {},
13
          }) {
14
            return existing && existing.slice(offset, offset + limit);
15
          },
16
          // ... keyArgs, merge ...
17
        },
18
      },
19
    },
20
  },
21
});

1
fetchMore({
2
  variables: { offset: data.feed.length },
3
  updateQuery(previousData, { fetchMoreResult, variables: { offset }}) {
4
    // Slicing is necessary because the existing data is
5
    // immutable, and frozen in development.
6
    const updatedFeed = previousData.feed.slice(0);
7
    for (let i = 0; i < fetchMoreResult.feed.length; ++i) {
8
      updatedFeed[offset + i] = fetchMoreResult.feed[i];
9
    }
10
    return { ...previousData, feed: updatedFeed };
11
  },
12
})