import { gql, useQuery } from '@apollo/client';
const GET_DOGS = gql`
query GetDogs {
dogs {
id
breed
}
}
`;
import React from 'react';
import { gql, useQuery } from '@apollo/client';
// Make sure that both the query and the component are exported
export const GET_DOG_QUERY = gql`
query GetDog($name: String) {
dog(name: $name) {
id
name
breed
}
}
`;
export function Dog({ name }) {
const { loading, error, data } = useQuery(
GET_DOG_QUERY,
{ variables: { name } }
);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error!</p>;
return (
<p>
{data.dog.name} is a {data.dog.breed}
</p>
);
}
import React from 'react';
import { useLazyQuery } from '@apollo/client';
function DelayedQuery() {
const [getDog, { loading, error, data }] = useLazyQuery(GET_DOG_PHOTO);
if (loading) return <p>Loading ...</p>;
if (error) return `Error! ${error}`;
return (
<div>
{data?.dog && <img src={data.dog.displayImage} />}
<button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>
Click me!
</button>
</div>
);
}
function Feed() {
const { loading, error, data, client } = useQuery(GET_DOGS);
let content;
if (loading) {
content = <Fetching />;
} else if (error) {
content = <Error />;
} else {
content = (
<DogList
data={data.dogs}
renderRow={(type, data) => (
<Link
to={{
pathname: `/${data.breed}/${data.id}`,
state: { id: data.id }
}}
onMouseOver={() =>
client.query({
query: GET_DOG,
variables: { breed: data.breed }
})
}
style={{ textDecoration: "none" }}
>
<Dog {...data} url={data.displayImage} />
</Link>
)}
/>
);
}
return (
<View style={styles.container}>
<Header />
{content}
</View>
);
}
import React from "react";
import ReactDOM from "react-dom";
import {
ApolloClient,
InMemoryCache,
HttpLink,
ApolloProvider,
useQuery,
gql
} from "@apollo/client";
import Pages from "./pages";
import Login from "./pages/login";
const cache = new InMemoryCache();
const client = new ApolloClient({
cache,
link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
resolvers: {},
});
const IS_LOGGED_IN = gql`
query IsUserLoggedIn {
isLoggedIn @client
}
`;
cache.writeQuery({
query: IS_LOGGED_IN,
data: {
isLoggedIn: !!localStorage.getItem("token"),
},
});
function App() {
const { data } = useQuery(IS_LOGGED_IN);
return data.isLoggedIn ? <Pages /> : <Login />;
}
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root"),
);