# 用 GraphQL 接 Restful API --- 部落格教學一 react + Apollo 後端是 restful api 使用 restful + fetch https://codesandbox.io/s/5m8jv3ovn?file=/src/utils.js 使用 restful + graphql https://codesandbox.io/s/xrpokzpmop?file=/src/index.js 原文 https://www.contentful.com/blog/2019/03/13/implementing-graphql-rest-api/ --- 部落格教學二 Next + Apollo 後端是 graphql https://medium.com/@tomanagle/create-a-server-side-rendering-graphql-client-with-next-js-and-apollo-client-acd397f70c64 ``` yarn add @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag isomorphic-unfetch next-with-apollo @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag isomorphic-unfetch next-with-apollo ``` --- 目標 使用 next + graphql 後端是 restful api 使用套件 fetch-headers apollo-link-rest apollo-link graphql graphql-anywhere qs --- demo https://api.github.com/repos/apollographql/apollo-link-rest ```jsx import { RestLink } from "apollo-link-rest"; import { ApolloClient } from "apollo-client"; import { InMemoryCache } from "apollo-cache-inmemory"; import gql from "graphql-tag"; import NodeFetch from 'node-fetch'; // Create a RestLink for the Github API const link = new RestLink({ uri: "https://api.github.com", customFetch: NodeFetch }); // Configure the ApolloClient with the recommended cache and RestLink const client = new ApolloClient({ cache: new InMemoryCache(), link }); // A simple query to retrieve metada about a specific repository const query = gql` query Repo { repo @rest(type: "Repo", path: "/repos/apollographql/apollo-link-rest") { id name description } } `; // The shape of the result we except from the query interface Result { repo: { id: number; name: string; description: string; }; } // Invoke the query and log the response data client.query<Result>({ query }).then(response => { console.log(response); console.log(response.data.repo); }); ```` 電影 api https://api.themoviedb.org/3/movie/now_playing?api_key=2xx&language=zh-TW&page=1 ```jsx import React from 'react'; import Head from 'next/head'; import { useQuery } from '@apollo/react-hooks'; import gql from 'graphql-tag'; import { ApolloClient } from 'apollo-client'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { RestLink } from 'apollo-link-rest'; import fetch from 'isomorphic-unfetch'; global.Headers = global.Headers || require('fetch-headers'); // Create a RestLink for the Github API const link = new RestLink({ uri: 'https://api.themoviedb.org/3', customFetch: fetch, }); // Configure the ApolloClient with the recommended cache and RestLink const client = new ApolloClient({ cache: new InMemoryCache(), link, }); // A simple query to retrieve metada about a specific repository const query = gql` query MovieNowPlay { movieDatas @rest( type: "MovieNowPlay" path: "/movie/now_playing?api_key=237xx&language=zh-TW&page=1" ) { results } } `; const Home = () => { const [datas, setDatas] = React.useState({ results: [] }); client.query({ query }).then((response) => { console.log(response); console.log(response.data.movieDatas); setDatas(response.data.movieDatas); }); return ( <div> <Head> <title>Home</title> <link rel="icon" href="/favicon.ico" /> </Head> 123 {datas && datas.results.map((data, idx) => { return <div>{data.title}</div>; })} </div> ); }; export default Home; ```