REST 链接

1
npm install --save @apollo/client apollo-link-rest graphql qs

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

4
// Set `RestLink` with your endpoint
5
const restLink = new RestLink({ uri: "https://swapi.dev/api/" });
6

7
// Setup your client
8
const client = new ApolloClient({
9
  cache: new InMemoryCache(),
10
  link: restLink
11
});

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

3
const query = gql`
4
  query Luke {
5
    person @rest(type: "Person", path: "people/1/") {
6
      name
7
    }
8
  }
9
`;

1
// Invoke the query and log the person's name
2
client.query({ query }).then(response => {
3
  console.log(response.data.person.name);
4
});

1
const link = new RestLink({ endpoints: { v1: 'api.com/v1', v2: 'api.com/v2' } });

1
const postTitleQuery1 = gql`
2
  query PostTitle {
3
    post @rest(type: "Post", path: "/post", endpoint: "v1") {
4
      id
5
      title
6
    }
7
  }
8
`;
9
const postTitleQuery2 = gql`
10
  query PostTitle {
11
    post @rest(type: "[Tag]", path: "/tags", endpoint: "v2") {
12
      id
13
      tags
14
    }
15
  }
16
`;

1
const link = new RestLink({
2
  endpoints: { github: 'github.com' },
3
  uri: 'api.com',
4
});

1
query MyQuery {
2
  planets @rest(type: "PlanetPayload", path: "planets/") {
3
    count
4
    next
5
    results {
6
      name
7
    }
8
  }
9
}

1
query MyQuery {
2
  planets @rest(type: "PlanetPayload", path: "planets/") {
3
    count
4
    next
5
    results @type(name: "Planet") {
6
      name
7
      failingResults {
8
        name
9
      }
10
    }
11
    typePatchedResults {
12
      name
13
    }
14
  }
15
}

1
{
2
  "id": 1,
3
  "name": "Apollo"
4
}

1
[
2
  {
3
    "id": 1,
4
    "name": "Apollo"
5
  },
6
  {
7
    "id": 2,
8
    "name": "Starman"
9
  }
10
]

1
{
2
  "meta": {},
3
  "data": [
4
    {
5
      "id": 1,
6
      "name": "Apollo"
7
    },
8
    {
9
      "id": 2,
10
      "name": "Starman"
11
    }
12
  ]
13
}

1
const link = new RestLink({
2
  uri: '/api',
3
  responseTransformer: async response => response.json().then(({data}) => data),
4
});

1
const link = new RestLink({
2
  uri: '/xmlApi',
3
  responseTransformer: async response => response.text().then(text => parseXmlResponseToJson(text)),
4
});

1
const link = new RestLink({
2
  endpoints: {
3
    v1: {
4
      uri: '/v1',
5
      responseTransformer: async response => response.data,
6
    },
7
    v2: {
8
      uri: '/v2',
9
      responseTransformer: async (response, typeName) => response[typeName],
10
    },
11
  },
12
});

1
const link = new RestLink({
2
  endpoints: "/api",
3
  customFetch: (uri, options) => new Promise((resolve, reject) => {
4
    // Your own (asynchronous) request handler
5
    resolve(responseObject)
6
  }),
7
});

1
import pThrottle from "p-throttle";
2

3
const link = new RestLink({
4
  endpoints: "/api",
5
  customFetch: pThrottle((uri, config) => {
6
      return fetch(uri, config);
7
    },
8
    2, // Max. concurrent Requests
9
    500 // Min. delay between calls
10
  ),
11
});

1
import fetch from 'cross-fetch';
2
import * as camelCase from 'camelcase';
3
import * as snake_case from 'snake-case';
4

5
const link = new RestLink({
6
  endpoints: { github: 'github.com' },
7
  uri: 'api.com',
8
  customFetch: fetch,
9
  headers: {
10
    "Content-Type": "application/json"
11
  },
12
  credentials: "same-origin",
13
  fieldNameNormalizer: (key: string) => camelCase(key),
14
  fieldNameDenormalizer: (key: string) => snake_case(key),
15
  typePatcher: {
16
    Post: ()=> {
17
      bodySnippet...
18
    }
19
  },
20
  defaultSerializer: (data: any, headers: Headers) => {
21
    const formData = new FormData();
22
    for (let key in data) {
23
      formData.append(key, data[key]);
24
    }
25
    headers.set("Content-Type", "x-www-form-encoded")
26
    return {data: formData, headers};
27
  }
28
});

1
const authRestLink = new ApolloLink((operation, forward) => {
2
  operation.setContext(({headers}) => {
3
    const token = localStorage.getItem("token");
4
    return {
5
      headers: {
6
        ...headers,
7
        Accept: "application/json",
8
        Authorization: token
9
      }
10
    };
11
  });
12
  return forward(operation).map(result => {
13
    const { restResponses } = operation.getContext();
14
    const authTokenResponse = restResponses.find(res => res.headers.has("Authorization"));
15
    // You might also filter on res.url to find the response of a specific API call
16
    if (authTokenResponse) {
17
      localStorage.setItem("token", authTokenResponse.headers.get("Authorization"));
18
    }
19
    return result;
20
  });
21
});
22

23
const restLink = new RestLink({ uri: "uri" });
24

25
const client = new ApolloClient({
26
  cache: new InMemoryCache(),
27
  link: ApolloLink.from([authRestLink, restLink])
28
});

1
const httpLink = createHttpLink({ uri: "server.com/graphql" });
2
const restLink = new RestLink({ uri: "api.server.com" });
3

4
const client = new ApolloClient({
5
  cache: new InMemoryCache(),
6
  link: ApolloLink.from([authLink, restLink, errorLink, retryLink, httpLink])
7
  // Note: httpLink is terminating so must be last, while retry & error wrap
8
  // the links to their right. State & context links should happen before (to
9
  // the left of) restLink.
10
});

1
query PostTitle {
2
  post(id: "1") @rest(type: "Post", path: "/post/{args.id}") {
3
    id
4
    title
5
  }
6
}

1
query PostTitle {
2
  postSearch(query: "some key words", page_size: 5)
3
    @rest(type: "Post", path: "/search?{args}&{context.language}") {
4
    id
5
    title
6
  }
7
}

1
mutation PublishPost(
2
  $someApiWithACustomBodyKey: PublishablePostInput!
3
) {
4
  publishedPost: publish(input: "Foo", body: $someApiWithACustomBodyKey)
5
    @rest(
6
      type: "Post"
7
      path: "/posts/{args.input}/new"
8
      method: "POST"
9
      bodyKey: "body"
10
    ) {
11
    id
12
    title
13
  }
14
}

1
mutation EncryptedPost(
2
  $input: PublishablePostInput!
3
  $encryptor: any
4
) {
5
  publishedPost: publish(input: $input)
6
    @rest(
7
      type: "Post"
8
      path: "/posts/new"
9
      method: "POST"
10
      bodyBuilder: $encryptor
11
    ) {
12
    id
13
    title
14
  }
15
}

1
mutation EncryptedForm(
2
  $input: PublishablePostInput!,
3
  $formSerializer: any
4
) {
5
  publishedPost: publish(input: $input)
6
    @rest(
7
      type: "Post",
8
      path: "/posts/new",
9
      method: "POST",
10
      bodySerializer: $formSerializer
11
    ) {
12
      id
13
      title
14
    }
15

16
  publishRSS(input: $input)
17
    @rest(
18
      type: "Post",
19
      path: "/feed",
20
      method: "POST",
21
      bodySerializer: "xml"
22
    )
23
}

1
const formSerializer = (data: any, headers: Headers) => {
2
  const formData = new FormData();
3
  for (let key in data) {
4
    if (data.hasOwnProperty(key)) {
5
      formData.append(key, data[key]);
6
    }
7
  }
8

9
  headers.set('Content-Type', 'application/x-www-form-urlencoded');
10

11
  return {body: formData, headers};
12
}

1
const restLink = new RestLink({
2
  ...otherOptions,
3
  bodySerializers: {
4
    xml: xmlSerializer
5
  }
6
})

1
const QUERY = gql`
2
  query RestData($email: String!) {
3
    users @rest(path: '/users/email?{args.email}', method: 'GET', type: 'User') {
4
      id @export(as: "id")
5
      firstName
6
      lastName
7
      friends @rest(path: '/friends/{exportVariables.id}', type: '[User]') {
8
        firstName
9
        lastName
10
      }
11
    }
12
  }
13
`;

1
mutation DeletePost($id: ID!) {
2
  deletePostResponse(id: $id)
3
    @rest(type: "Post", path: "/posts/{args.id}", method: "DELETE") {
4
    NoResponse
5
  }
6
}