Skip to content

Instantly share code, notes, and snippets.

@jevakallio
Last active April 17, 2019 02:46
Show Gist options
  • Save jevakallio/60cc7b0d4b5abd0345aba44871f4e524 to your computer and use it in GitHub Desktop.
Save jevakallio/60cc7b0d4b5abd0345aba44871f4e524 to your computer and use it in GitHub Desktop.
Apollo/Fraql fragments. just an example, not syntactically correct
import gql from 'fraql'
import { ListRow } from './ListRow';
// this is the whole list
export const List = ({ users }) => (
<ul>
{users.map(user => <ListRow user={user} />)}
</ul>
)
// define list data reqs
List.fragments = {
users: gql`
fragment _ on Project {
users(first: 10) {
id
${ListRow.fragments.user}
}
}`
};
import gql from 'fraql'
// this is a single item in a list
export const ListRow = ({ user }) => (
<li>{user.name} {user.email}</li>
)
// define row data reqs
ListRow.fragments = {
user: gql`
fragment _ on User {
name
email
}
`
};
import gql from 'fraql'
import { Query } from 'react-apollo;
import { List } from './List';
// this is the query that fetches a project an its users
// using the List's data reqs
const query = gql`
query ProjectUsers($projectId: ID!) {
project(id: $projectId) {
id
title
${List.fragments.users}
}
}
`;
// this is a page container that executes the query and
// passes the data down to the list component
export const Page = ({ projectId }) => (
<Query query={query} variables={{ projectId }}>
{({ data }) => (
<div>
<h1>{data.project.title}</h1>
<List users={data.project.users} />
</div>
)}
</Query>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment