在 Apollo 客户端中使用缓存的进阶主题

1
const { loading, error, data } = useQuery(GET_DOGS, {
2
  fetchPolicy: "no-cache" 
3
});

1
import AsyncStorage from '@react-native-async-storage/async-storage';
2
import { InMemoryCache } from '@apollo/client';
3
import { persistCache } from 'apollo3-cache-persist';
4

5
const cache = new InMemoryCache();
6

7
persistCache({
8
  cache,
9
  storage: AsyncStorage,
10
}).then(() => {
11
  // Continue setting up Apollo Client as usual.
12
})

1
import { useQuery } from '@apollo/client';
2
function Profile() {
3
    const { data, client } = useQuery(PROFILE_QUERY);
4
    return (
5
      <Fragment>
6
        <p>Current user: {data?.currentUser}</p>
7
        <button onClick={async ()=>client.resetStore()}>
8
            Log out
9
        </button>
10
      </Fragment>
11
    );
12
}

1
import { ApolloClient, InMemoryCache } from '@apollo/client';
2
import { withClientState } from 'apollo-link-state';
3

4
import { resolvers, defaults } from './resolvers';
5

6
const cache = new InMemoryCache();
7
const stateLink = withClientState({ cache, resolvers, defaults });
8

9
const client = new ApolloClient({
10
  cache,
11
  link: stateLink,
12
});
13

14
client.onResetStore(stateLink.writeDefaults);

1
import { useApolloClient } from '@apollo/client';
2

3
function Foo (){
4
  const [reset, setReset] = useState(0);
5
  const client = useApolloClient();
6

7
  useEffect(() => {
8
    const unsubscribe = client.onResetStore(() =>
9
      new Promise(()=>setReset(reset + 1))
10
    );
11

12
    return () => {
13
      unsubscribe();
14
    };
15
  });
16

17
  return reset ? <div /> : <span />
18
}
19

20
export default Foo;

1
const cache = new InMemoryCache({
2
  possibleTypes: {
3
    Reptile: ["Snake", "Turtle"],
4
    Snake: ["Python", "Viper", "Cobra"],
5
    Viper: ["Cottonmouth", "DeathAdder"],
6
  },
7

8
  typePolicies: {
9
    Reptile: {
10
      // Suppose all our reptiles are captive, and have a tag with an ID.
11
      keyFields: ["tagId"],
12
      fields: {
13
        // Scientific name-related logic can be shared among Reptile subtypes.
14
        scientificName: {
15
          merge(_, incoming) {
16
            // Normalize all scientific names to lower case.
17
            return incoming.toLowerCase();
18
          },
19
        },
20
      },
21
    },
22

23
    Snake: {
24
      fields: {
25
        // Default to a truthy non-boolean value if we don't know
26
        // whether this snake is venomous.
27
        venomous(status = "unknown") {
28
          return status;
29
        },
30
      },
31
    },
32
  },
33
});

1
query Books {
2
  books {
3
    id
4
    title
5
    abstract
6
  }
7
}

1
query Book($id: ID!) {
2
  book(id: $id) {
3
    id
4
    title
5
    abstract
6
  }
7
}

1
import { ApolloClient, InMemoryCache } from '@apollo/client';
2

3
const client = new ApolloClient({
4
  cache: new InMemoryCache({
5
    typePolicies: {
6
      Query: {
7
        fields: {
8
          book: {
9
            read(_, { args, toReference }) {
10
              return toReference({
11
                __typename: 'Book',
12
                id: args.id,
13
              });
14
            }
15
          }
16
        }
17
      }
18
    }
19
  })
20
});

1
const query = gql`
2
  query Feed($type: FeedType!, $offset: Int, $limit: Int) {
3
    feed(type: $type, offset: $offset, limit: $limit) @connection(key: "feed", filter: ["type"]) {
4
      ...FeedEntry
5
    }
6
  }
7
`

1
client.writeQuery({
2
  query: gql`
3
    query Feed($type: FeedType!) {
4
      feed(type: $type) @connection(key: "feed", filter: ["type"]) {
5
        id
6
      }
7
    }
8
  `,
9
  variables: {
10
    type: "top",
11
  },
12
  data: {
13
    feed: [],
14
  },
15
});