https://github.com/ebazhanov/react-graphql-example
An example of usage GraphQL and React
https://github.com/ebazhanov/react-graphql-example
example graphql react typescript
Last synced: 10 months ago
JSON representation
An example of usage GraphQL and React
- Host: GitHub
- URL: https://github.com/ebazhanov/react-graphql-example
- Owner: Ebazhanov
- Created: 2021-11-28T09:25:34.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-25T10:07:09.000Z (over 3 years ago)
- Last Synced: 2025-04-11T22:08:20.804Z (10 months ago)
- Topics: example, graphql, react, typescript
- Language: TypeScript
- Homepage: https://graphql-react-example.netlify.app/
- Size: 1.12 MB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Graphql + React [simple example](https://graphql-react-example.netlify.app/)
----
Make query `GetExchangeRates` here https://48p1r2roz4.sse.codesandbox.io
```
query GetExchangeRates {
rates(currency: "USD") {
currency
rate
}
}
```
---------
### Creat React typescript project
```shell
$ npx create-react-app my-app --template typescript
$ yarn add @apollo/client graphql
```
---------
### Connect Apollo Client to React with the ApolloProvider component. [src/index.tsx](src/index.tsx)
```tsx
import {
ApolloClient,
InMemoryCache,
ApolloProvider
} from "@apollo/client";
const client = new ApolloClient({
uri: 'https://48p1r2roz4.sse.codesandbox.io',
cache: new InMemoryCache()
});
render(
,
document.getElementById('root'),
);
```
---------
### Fetch data with useQuery that shares GraphQL data with your UI. [src/App.tsx](src/App.tsx)
```tsx
import React from 'react';
import './App.css';
import {gql, useQuery} from "@apollo/client";
const EXCHANGE_RATES = gql`
query GetExchangeRates {
rates(currency: "USD") {
currency
rate
}
}
`;
function ExchangeRates() {
const {loading, error, data} = useQuery(EXCHANGE_RATES);
if (loading) return
Loading...
;
if (error) return Error :(
;
return data.rates.map(({currency, rate}: { currency: string, rate: number }) => (
{currency}: {rate}
));
}
function App() {
return (
get "Currency Exchange Rates" using Apollo & Graphql
);
}
export default App;
```
---------
## Official documentation [link](https://www.apollographql.com/docs/react/get-started/) or [https://graphql.org/](https://graphql.org/)