Apollo React를 사용하여 GraphQL로 RESTapi 래핑

Question

Apollo 클라이언트와 React를 사용하여 프로젝트 (외환 교환 앱)를 수행해야합니다. graphql을 사용하여 기존 REST API (fixer.io)를 래핑해야합니다. 지금까지 온라인에서 솔루션을 찾는 행운은 없습니다. 여러 자습서를 사용해 보았지만 작동하지 않는 것 같습니다. 누구나이 경험이 있습니까?

감사합니다.

Answer 1

Graphcool Framework을 사용하면 resolver functions을 정의 할 수 있으므로 쉽게 REST API를 감쌀 수 있습니다. 함수를 정의하고이를 GraphQL 스키마의 특정 돌연변이 또는 쿼리에 연결할 수 있습니다.

나는 a demo, wrapping the fixer API을 준비했다.

봅니다 예를 들어, 기본으로 USD로 환율을 얻기 위해이 쿼리를 실행하려면 다음

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 

공유 할 주시기 바랍니다 :

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

당신이 이렇게 자신을 데모를 구축 할 수 있습니다 당신이 염두에 두었을지도 모르는 개선점, 예는 open source입니다. 리졸버에 대한 자세한 내용은 here을 참조하십시오.

Answer 2

Apollo client 2.0을 사용하고 클라이언트 측이되기를 원한다고 가정합니다.

먼저 apollo bridge link이 필요합니다. 그것은 "GraphQL 서버가 없는데 (아직) 클라이언트에서 GraphQL을 사용하고 싶을 때"사용됩니다.

// 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; 
}; 

:

// 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; 

마지막으로, 당신은 아폴로 클라이언트 공장을 만들 :

/* 
    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); 
    } 
} 

다음 당신은 스키마와 리졸버를 만들 : 당신이 그것을 인라인 할 수 있도록 소스 코드는 매우 짧은 사용 방법은 다음과 같습니다.

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'), 
);