Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emilydaykin/graphql
GraphQL practice with Gifter v1 🎁
https://github.com/emilydaykin/graphql
apollo-client firebase graphql reactjs sass
Last synced: 7 days ago
JSON representation
GraphQL practice with Gifter v1 🎁
- Host: GitHub
- URL: https://github.com/emilydaykin/graphql
- Owner: emilydaykin
- Created: 2022-07-20T13:47:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-23T14:42:45.000Z (over 2 years ago)
- Last Synced: 2024-09-09T17:20:23.671Z (2 months ago)
- Topics: apollo-client, firebase, graphql, reactjs, sass
- Language: JavaScript
- Homepage:
- Size: 2.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GraphQL
This app wraps **GraphQL** and **Apollo** around [Gifter v1](https://github.com/emilydaykin/Gifter/tree/v1) with minor styling adjustments. The goal of this spin-off repo was to practise integrating GraphQL on the front end via Apollo Client, and writing queries to fetch data from a provided server.
(Check out the [final version of Gifter](https://giftsbygifter.netlify.app/) - non-GraphQL edition that's built with TypeScript, Redux and Stripe on top of React, Sass and Firebase - and the corresponding repo [README](https://github.com/emilydaykin/Gifter/blob/main/README.md).)
## Installation:
This application is not deployed. To see it in action, run it locally:
1. Clone this repo
2. Run `yarn` from the root directory to install necessary packages and dependencies
3. Run `yarn start` from the root directory to spin up the client
## Code Snippets:
### Wrapping GraphQL around the App using Apollo Client
```javascript
const client = new ApolloClient({
uri: 'https://crwn-clothing.com/',
cache: new InMemoryCache()
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
...
...
);
```
### Fetching all categories from database in React Context
```javascript
import { createContext, useState, useEffect } from 'react';
import { gql, useQuery } from '@apollo/client';
export const CategoriesContext = createContext({
categoriesMap: {}
});
const COLLECTIONS = gql`
query {
collections {
id
title
items {
id
name
price
imageUrl
}
}
}
`;
export const CategoriesProvider = ({ children }) => {
const { loading, error, data } = useQuery(COLLECTIONS);
const [categoriesMap, setCategoriesMap] = useState({});
useEffect(() => {
if (data) {
const { collections } = data;
const collectionsMap = collections.reduce((acc, collection) => {
const { title, items } = collection;
acc[title.toLowerCase()] = items;
return acc;
}, {});
setCategoriesMap(collectionsMap);
}
}, [data]);
const value = { categoriesMap, loading };
return {children};
};
```
### Dynamically fetching (via useParams) a specific category (using query variables) from database
```javascript
...
import { gql, useQuery } from '@apollo/client';
const GET_CATEGORY = gql`
query ($title: String) {
getCollectionsByTitle(title: $title) {
id
title
items {
id
name
price
imageUrl
}
}
}
`;
const Category = () => {
const { category } = useParams();
const { loading, error, data } = useQuery(GET_CATEGORY, {
variables: {
title: category
}
});
useEffect(() => {
if (data) {
const {
getCollectionsByTitle: { items }
} = data;
setProducts(items);
}
}, [category, data]);
const [products, setProducts] = useState([]);
return(
...
)
}
```
## GraphQL Playground:
Sample query in a GraphQL playground using a provided server:
## Challenges:
The way the [Apollo Client URI](https://crwn-clothing.com/) was created was quite black-box to me. I tried replicating it by learning about Prisma as a layer between my Firestore database (where my Gifter [data](https://github.com/emilydaykin/Gifter/blob/main/src/data/shop-data.js) sits) and this client application, but I haven't yet found a way to link my Firestore to Prisma (to create a GraphQL Playground and Server) to then link to Apollo GraphQL in the front end.