Apollo Reactを使用してGraphQLでRESTapiをラップする

Question

ApolloクライアントとReactを使用してプロジェクト（外貨両替アプリ）を行う必要があります。私は、既存のREST API（fixer.io）をgraphqlでラップする必要があります。これまでにオンラインで解決策を見つけることはできません。いくつかのチュートリアルを試してみましたが、うまくいかないようです。誰もがこれを経験している？

ありがとうございました。

Answer 1

Graphcool Frameworkでは、resolver functionsを定義できます。これにより、簡単にREST APIをラップすることができます。関数を定義し、それをGraphQLスキーマ内の特定の変異またはクエリに接続することができます。

a demo, wrapping the fixer APIを用意しました。

例えば、ベースとしてUSDでの為替レートを取得するには、このクエリを実行してください：

query { 
    fixer(
    base: "USD" 
) { 
    base 
    date 
    eur 
    usd 
    rub 
    } 
} 

あなたは、これは、このように自分のデモ構築することができます：

git clone git@github.com:graphcool/templates.git 
cd templates/curated/misc/fixer-wrapper 
npm install -g graphcool@next 
graphcool init 
graphcool deploy 
graphcool playground 

共有すること自由に感じてください。あなたが念頭に置いている改善があれば、その例はopen sourceです。レゾルバの詳細については、hereを参照してください。

Answer 2

Apollo client 2.0を使用し、すべてがクライアント側であることを前提とします。

まず、apollo bridge linkが必要です。これは、「GraphQLサーバをまだお持ちでなく、クライアント上でGraphQLを使用したい場合」に使用されます。あなたはそれをインライン化できるように、そのソースコードは、非常に短いです：

/* 
    Copyright (c) 2017 David Cizek 
    https://github.com/dacz/apollo-bridge-link 
*/ 
import { GraphQLSchema, graphql, print } from 'graphql'; 
import { addMockFunctionsToSchema, makeExecutableSchema } from 'graphql-tools'; 

import { ApolloLink } from 'apollo-link'; 
import Observable from 'zen-observable'; 

export const createBridgeLink = ({ schema, resolvers, mock, context = {} }) => { 
    let executableSchema; 
    if (typeof schema === 'string') { 
     executableSchema = makeExecutableSchema({ typeDefs: schema, resolvers }); 
    } else if (schema.kind === 'Document') { 
     executableSchema = makeExecutableSchema({ 
      typeDefs: print(schema), 
      resolvers, 
     }); 
    } else if (schema instanceof GraphQLSchema) { 
     executableSchema = schema; 
    } else { 
     throw new Error('schema should be plain text, parsed schema or executable schema.'); 
    } 

    if (mock) 
     {addMockFunctionsToSchema({ 
      schema: executableSchema, 
      preserveResolvers: true, 
     });} 

    return new ApolloLink(
     operation => 
      new Observable(observer => { 
       const { headers, credentials } = operation.getContext(); 
       const ctx = { 
        ...context, 
        headers, 
        credentials, 
       }; 

       graphql(executableSchema, print(operation.query), undefined, ctx, operation.variables, operation.operationName) 
        .then(data => { 
         observer.next(data); 
         observer.complete(); 
        }) 
        .catch(err => { 
         /* istanbul ignore next */ 
         observer.error(err); 
        }); 
      }), 
    ); 
}; 

export class BridgeLink extends ApolloLink { 
    requester; 

    constructor(opts) { 
     super(); 
     this.requester = createBridgeLink(opts).request; 
    } 

    request(op) { 
     return this.requester(op); 
    } 
} 

次のスキーマとリゾルバを作成します。

// schema.js 
export default ` 
type Rate { 
    date: Date! 
    rate: Float! 
} 

type Query { 
    latestRate(from: String!, to: String!): Rate 
} 

schema { 
    query: Query 
} 
`; 


// resolvers.js 
const resolvers = { 
    Query: { 
    latestRate(obj, args, context, info) { 
     return fetch(`https://api.fixer.io/latest?base=${args.from}`).then(res => res.json()) 
     .then(res => { date: res.date, rate: res.rates[args.to] }) 
    } 
    } 
} 

export default resolvers; 

最後に、あなたはアポロクライアントファクトリを作成します。

// clientFactory.js 
import { ApolloClient } from 'apollo-client'; 
import { InMemoryCache } from 'apollo-cache-inmemory'; 

import { BridgeLink } from './apollo-bridge-link'; 

import schema from './schema'; 
import resolvers from './resolvers'; 

export default() => { 
    const mock = false; 
    const context = {}; 

    const client = new ApolloClient({ 
     link: new BridgeLink({ schema, resolvers, mock, context }), 
     cache: new InMemoryCache(), 
    }); 
    return client; 
}; 

を使用方法は次のとおりです。

import gql from 'graphql-tag'; 
import clientFactory from './clientFactory' 

const client = clientFactory(); 

client.query(gql`query { 
    latestRate(from: "USD", to: "EUR") { date, rate } 
}`).then(console.log) 

あなたが反応して、それを使用したい場合：

import { ApolloProvider } from 'react-apollo'; 
const client = clientFactory(); 

const App = ({ data: { latestRate, refetch } }) => { 
    return <div> 
    <span>Today:</span><span>{latestRate.date}</span> 
    <span>1 USD equals:</span><span>{latestRate.rate} EUR</span> 
    <button onClick={() => refetch()}> 
     Refresh 
    </button> 
    </div> 
} 

const AppWithQuery = graphql(gql` 
    query { 
    latestRate(from: "USD", to: "EUR") { date, rate } 
    } 
`)(App); 

ReactDOM.render(
    <ApolloProvider client={client}> 
    <AppWithQuery/> 
    </ApolloProvider>, 
    document.getElementById('root'), 
);