Skip to content

Commit 104e852

Browse files
lachlancollinslachlancollins
committed
Fix prettier
1 parent f1d9242 commit 104e852

File tree

9 files changed

+161
-161
lines changed

9 files changed

+161
-161
lines changed

‎examples/react/basic-graphql-request/src/index.jsx‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
/* eslint-disable jsx-a11y/anchor-is-valid */
2-
import React from "react";
3-
import ReactDOM from "react-dom/client";
2+
import React from 'react'
3+
import ReactDOM from 'react-dom/client'
44
import {
55
useQuery,
66
useQueryClient,
77
QueryClient,
88
QueryClientProvider,
9-
} from "@tanstack/react-query";
10-
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
11-
import { request, gql } from "graphql-request";
9+
} from '@tanstack/react-query'
10+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
11+
import { request, gql } from 'graphql-request'
1212

13-
const endpoint = "https://graphqlzero.almansi.me/api";
13+
const endpoint = 'https://graphqlzero.almansi.me/api'
1414

15-
const queryClient = new QueryClient();
15+
const queryClient = new QueryClient()
1616

1717
function App() {
18-
const [postId, setPostId] = React.useState(-1);
18+
const [postId, setPostId] = React.useState(-1)
1919

2020
return (
2121
<QueryClientProvider client={queryClient}>
2222
<p>
2323
As you visit the posts below, you will notice them in a loading state
2424
the first time you load them. However, after you return to this list and
2525
click on any posts you have already visited again, you will see them
26-
load instantly and background refresh right before your eyes!{" "}
26+
load instantly and background refresh right before your eyes!{' '}
2727
<strong>
2828
(You may need to throttle your network speed to simulate longer
2929
loading sequences)
@@ -36,12 +36,12 @@ function App() {
3636
)}
3737
<ReactQueryDevtools initialIsOpen />
3838
</QueryClientProvider>
39-
);
39+
)
4040
}
4141

4242
function usePosts() {
4343
return useQuery({
44-
queryKey: ["posts"],
44+
queryKey: ['posts'],
4545
queryFn: async () => {
4646
const {
4747
posts: { data },
@@ -56,24 +56,24 @@ function usePosts() {
5656
}
5757
}
5858
}
59-
`
60-
);
61-
return data;
59+
`,
60+
)
61+
return data
6262
},
63-
});
63+
})
6464
}
6565

6666
function Posts({ setPostId }) {
67-
const queryClient = useQueryClient();
68-
const { status, data, error, isFetching } = usePosts();
67+
const queryClient = useQueryClient()
68+
const { status, data, error, isFetching } = usePosts()
6969

7070
return (
7171
<div>
7272
<h1>Posts</h1>
7373
<div>
74-
{status === "pending" ? (
75-
"Loading..."
76-
) : status === "error" ? (
74+
{status === 'pending' ? (
75+
'Loading...'
76+
) : status === 'error' ? (
7777
<span>Error: {error.message}</span>
7878
) : (
7979
<>
@@ -86,10 +86,10 @@ function Posts({ setPostId }) {
8686
style={
8787
// We can find the existing query data here to show bold links for
8888
// ones that are cached
89-
queryClient.getQueryData(["post", post.id])
89+
queryClient.getQueryData(['post', post.id])
9090
? {
91-
fontWeight: "bold",
92-
color: "green",
91+
fontWeight: 'bold',
92+
color: 'green',
9393
}
9494
: {}
9595
}
@@ -99,17 +99,17 @@ function Posts({ setPostId }) {
9999
</p>
100100
))}
101101
</div>
102-
<div>{isFetching ? "Background Updating..." : " "}</div>
102+
<div>{isFetching ? 'Background Updating...' : ' '}</div>
103103
</>
104104
)}
105105
</div>
106106
</div>
107-
);
107+
)
108108
}
109109

110110
function usePost(postId) {
111111
return useQuery(
112-
["post", postId],
112+
['post', postId],
113113
async () => {
114114
const { post } = await request(
115115
endpoint,
@@ -121,19 +121,19 @@ function usePost(postId) {
121121
body
122122
}
123123
}
124-
`
125-
);
124+
`,
125+
)
126126

127-
return post;
127+
return post
128128
},
129129
{
130130
enabled: !!postId,
131-
}
132-
);
131+
},
132+
)
133133
}
134134

135135
function Post({ postId, setPostId }) {
136-
const { status, data, error, isFetching } = usePost(postId);
136+
const { status, data, error, isFetching } = usePost(postId)
137137

138138
return (
139139
<div>
@@ -142,22 +142,22 @@ function Post({ postId, setPostId }) {
142142
Back
143143
</a>
144144
</div>
145-
{!postId || status === "pending" ? (
146-
"Loading..."
147-
) : status === "error" ? (
145+
{!postId || status === 'pending' ? (
146+
'Loading...'
147+
) : status === 'error' ? (
148148
<span>Error: {error.message}</span>
149149
) : (
150150
<>
151151
<h1>{data.title}</h1>
152152
<div>
153153
<p>{data.body}</p>
154154
</div>
155-
<div>{isFetching ? "Background Updating..." : " "}</div>
155+
<div>{isFetching ? 'Background Updating...' : ' '}</div>
156156
</>
157157
)}
158158
</div>
159-
);
159+
)
160160
}
161161

162-
const rootElement = document.getElementById("root");
163-
ReactDOM.createRoot(rootElement).render(<App />);
162+
const rootElement = document.getElementById('root')
163+
ReactDOM.createRoot(rootElement).render(<App />)

‎examples/react/basic/src/index.jsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
/* eslint-disable jsx-a11y/anchor-is-valid */
2-
import React from "react";
3-
import ReactDOM from "react-dom/client";
4-
import axios from "axios";
2+
import React from 'react'
3+
import ReactDOM from 'react-dom/client'
4+
import axios from 'axios'
55
import {
66
useQuery,
77
useQueryClient,
88
QueryClient,
99
QueryClientProvider,
10-
} from "@tanstack/react-query";
11-
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
10+
} from '@tanstack/react-query'
11+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
1212

13-
const queryClient = new QueryClient();
13+
const queryClient = new QueryClient()
1414

1515
function App() {
16-
const [postId, setPostId] = React.useState(-1);
16+
const [postId, setPostId] = React.useState(-1)
1717

1818
return (
1919
<QueryClientProvider client={queryClient}>
2020
<p>
2121
As you visit the posts below, you will notice them in a loading state
2222
the first time you load them. However, after you return to this list and
2323
click on any posts you have already visited again, you will see them
24-
load instantly and background refresh right before your eyes!{" "}
24+
load instantly and background refresh right before your eyes!{' '}
2525
<strong>
2626
(You may need to throttle your network speed to simulate longer
2727
loading sequences)
@@ -34,32 +34,32 @@ function App() {
3434
)}
3535
<ReactQueryDevtools initialIsOpen />
3636
</QueryClientProvider>
37-
);
37+
)
3838
}
3939

4040
function usePosts() {
4141
return useQuery({
42-
queryKey: ["posts"],
42+
queryKey: ['posts'],
4343
queryFn: async () => {
4444
const { data } = await axios.get(
45-
"https://jsonplaceholder.typicode.com/posts"
46-
);
47-
return data;
45+
'https://jsonplaceholder.typicode.com/posts',
46+
)
47+
return data
4848
},
49-
});
49+
})
5050
}
5151

5252
function Posts({ setPostId }) {
53-
const queryClient = useQueryClient();
54-
const { status, data, error, isFetching } = usePosts();
53+
const queryClient = useQueryClient()
54+
const { status, data, error, isFetching } = usePosts()
5555

5656
return (
5757
<div>
5858
<h1>Posts</h1>
5959
<div>
60-
{status === "pending" ? (
61-
"Loading..."
62-
) : status === "error" ? (
60+
{status === 'pending' ? (
61+
'Loading...'
62+
) : status === 'error' ? (
6363
<span>Error: {error.message}</span>
6464
) : (
6565
<>
@@ -72,10 +72,10 @@ function Posts({ setPostId }) {
7272
style={
7373
// We can access the query data here to show bold links for
7474
// ones that are cached
75-
queryClient.getQueryData(["post", post.id])
75+
queryClient.getQueryData(['post', post.id])
7676
? {
77-
fontWeight: "bold",
78-
color: "green",
77+
fontWeight: 'bold',
78+
color: 'green',
7979
}
8080
: {}
8181
}
@@ -85,31 +85,31 @@ function Posts({ setPostId }) {
8585
</p>
8686
))}
8787
</div>
88-
<div>{isFetching ? "Background Updating..." : " "}</div>
88+
<div>{isFetching ? 'Background Updating...' : ' '}</div>
8989
</>
9090
)}
9191
</div>
9292
</div>
93-
);
93+
)
9494
}
9595

9696
const getPostById = async (id) => {
9797
const { data } = await axios.get(
98-
`https://jsonplaceholder.typicode.com/posts/${id}`
99-
);
100-
return data;
101-
};
98+
`https://jsonplaceholder.typicode.com/posts/${id}`,
99+
)
100+
return data
101+
}
102102

103103
function usePost(postId) {
104104
return useQuery({
105-
queryKey: ["post", postId],
105+
queryKey: ['post', postId],
106106
queryFn: () => getPostById(postId),
107107
enabled: !!postId,
108-
});
108+
})
109109
}
110110

111111
function Post({ postId, setPostId }) {
112-
const { status, data, error, isFetching } = usePost(postId);
112+
const { status, data, error, isFetching } = usePost(postId)
113113

114114
return (
115115
<div>
@@ -118,22 +118,22 @@ function Post({ postId, setPostId }) {
118118
Back
119119
</a>
120120
</div>
121-
{!postId || status === "pending" ? (
122-
"Loading..."
123-
) : status === "error" ? (
121+
{!postId || status === 'pending' ? (
122+
'Loading...'
123+
) : status === 'error' ? (
124124
<span>Error: {error.message}</span>
125125
) : (
126126
<>
127127
<h1>{data.title}</h1>
128128
<div>
129129
<p>{data.body}</p>
130130
</div>
131-
<div>{isFetching ? "Background Updating..." : " "}</div>
131+
<div>{isFetching ? 'Background Updating...' : ' '}</div>
132132
</>
133133
)}
134134
</div>
135-
);
135+
)
136136
}
137137

138-
const rootElement = document.getElementById("root");
139-
ReactDOM.createRoot(rootElement).render(<App />);
138+
const rootElement = document.getElementById('root')
139+
ReactDOM.createRoot(rootElement).render(<App />)

0 commit comments

Comments
 (0)