https://github.com/madjam002/react-graphql

A simple but powerful GraphQL client for React
https://github.com/madjam002/react-graphql

Last synced: about 1 month ago
JSON representation

A simple but powerful GraphQL client for React

• Host: GitHub
• URL: https://github.com/madjam002/react-graphql
• Owner: madjam002
• License: mit
• Created: 2016-09-25T19:38:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-09T16:26:46.000Z (about 8 years ago)
• Last Synced: 2024-04-24T18:42:12.999Z (9 months ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
react-graphql [![Build Status](https://img.shields.io/travis/madjam002/react-graphql/master.svg?style=flat)](https://travis-ci.org/madjam002/react-graphql)  [![NPM](https://img.shields.io/npm/v/react-graphql.svg)](https://npmjs.com/package/react-graphql) [![Github Issues](https://img.shields.io/github/license/madjam002/react-graphql.svg)](https://github.com/madjam002/react-graphql)

==================

> A simple but powerful GraphQL client for React

**This project is a work in progress and is not ready for production yet. The API is likely to change over the next couple of weeks.**

*Docs coming soon*

## Example

```js

import React from 'react'

import ReactDOM from 'react-dom'

import {gql, connectGraph, graphComponent} from 'react-graphql'

import {print} from 'graphql-tag/printer'

const MyApp = connectGraph({

  query: () => gql`

    query($userId: ID!) {

      user(id: $userId) {

        id

        name

        ${AboutUser.getFragment('user')}

      }

    }

  `,

  variables: props => ({

    userId: props.userId,

  }),

})(props => (

  


    
Welcome, {props.user.name}!

    


    

  

))


const AboutUser = graphComponent({

  fragments: {

    user: () => gql`

      fragment AboutUser on User {

        about

      }

    `,

  },

})(props => (

  


    {props.user.about}

  

))


const graphQLContext = createGraphQLContext({

  defaultLoadingComponent: Loading,

  async executeQuery(query, variables) {

    const res = await fetch(/* your graphql server */, {

      method: 'POST',

      headers: {

        'Content-Type': 'application/json',

      },

      body: JSON.stringify({

        query: print(query),

        variables,

      }),

    })

    const result = await res.json()

    return result

  },

})

ReactDOM.render(

  

    

  

, document.getElementById('app'))

```

## License

Licensed under the MIT License.

[View the full license here](https://raw.githubusercontent.com/madjam002/react-graphql/master/LICENSE).