jos3duardo/upload-apollo-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Configure Prettier option singleQuote to the default, false.

Browse Source
This commit is contained in:
Jayden Seric 2021-12-06 23:35:31 +11:00
parent e3d91cb16b
commit 783873a6be
20 changed files with 90 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc.json
View File

@ -1,4 +1,3 @@
{ {
"proseWrap": "never", "proseWrap": "never"
"singleQuote": true
} }

3
api/.prettierrc.json
View File

@ -1,4 +1,3 @@
{ {
"proseWrap": "never", "proseWrap": "never"
"singleQuote": true
} }

2
api/config/UPLOAD_DIRECTORY_URL.mjs
View File

@ -1 +1 @@
export default new URL('../uploads/', import.meta.url); export default new URL("../uploads/", import.meta.url);

14
api/schema/FileType.mjs
View File

@ -1,22 +1,22 @@
import { GraphQLNonNull, GraphQLObjectType, GraphQLString } from 'graphql'; import { GraphQLNonNull, GraphQLObjectType, GraphQLString } from "graphql";
import UPLOAD_DIRECTORY_URL from '../config/UPLOAD_DIRECTORY_URL.mjs'; import UPLOAD_DIRECTORY_URL from "../config/UPLOAD_DIRECTORY_URL.mjs";
export default new GraphQLObjectType({ export default new GraphQLObjectType({
name: 'File', name: "File",
description: 'A stored file.', description: "A stored file.",
fields: () => ({ fields: () => ({
id: { id: {
description: 'Unique ID.', description: "Unique ID.",
type: new GraphQLNonNull(GraphQLString), type: new GraphQLNonNull(GraphQLString),
resolve: (storedFileName) => storedFileName, resolve: (storedFileName) => storedFileName,
}, },
name: { name: {
description: 'File name.', description: "File name.",
type: new GraphQLNonNull(GraphQLString), type: new GraphQLNonNull(GraphQLString),
resolve: (storedFileName) => storedFileName, resolve: (storedFileName) => storedFileName,
}, },
url: { url: {
description: 'File URL.', description: "File URL.",
type: new GraphQLNonNull(GraphQLString), type: new GraphQLNonNull(GraphQLString),
resolve: (storedFileName) => resolve: (storedFileName) =>
new URL(storedFileName, UPLOAD_DIRECTORY_URL), new URL(storedFileName, UPLOAD_DIRECTORY_URL),

18
api/schema/MutationType.mjs
View File

@ -1,28 +1,28 @@
import { GraphQLList, GraphQLNonNull, GraphQLObjectType } from 'graphql'; import { GraphQLList, GraphQLNonNull, GraphQLObjectType } from "graphql";
import GraphQLUpload from 'graphql-upload/public/GraphQLUpload.js'; import GraphQLUpload from "graphql-upload/public/GraphQLUpload.js";
import storeUpload from '../storeUpload.mjs'; import storeUpload from "../storeUpload.mjs";
import FileType from './FileType.mjs'; import FileType from "./FileType.mjs";
export default new GraphQLObjectType({ export default new GraphQLObjectType({
name: 'Mutation', name: "Mutation",
fields: () => ({ fields: () => ({
singleUpload: { singleUpload: {
description: 'Stores a single file.', description: "Stores a single file.",
type: new GraphQLNonNull(FileType), type: new GraphQLNonNull(FileType),
args: { args: {
file: { file: {
description: 'File to store.', description: "File to store.",
type: new GraphQLNonNull(GraphQLUpload), type: new GraphQLNonNull(GraphQLUpload),
}, },
}, },
resolve: (parent, { file }) => storeUpload(file), resolve: (parent, { file }) => storeUpload(file),
}, },
multipleUpload: { multipleUpload: {
description: 'Stores multiple files.', description: "Stores multiple files.",
type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(FileType))), type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(FileType))),
args: { args: {
files: { files: {
description: 'Files to store.', description: "Files to store.",
type: new GraphQLNonNull( type: new GraphQLNonNull(
new GraphQLList(new GraphQLNonNull(GraphQLUpload)) new GraphQLList(new GraphQLNonNull(GraphQLUpload))
), ),

12
api/schema/QueryType.mjs
View File

@ -1,13 +1,13 @@
import fs from 'fs'; import fs from "fs";
import { GraphQLList, GraphQLNonNull, GraphQLObjectType } from 'graphql'; import { GraphQLList, GraphQLNonNull, GraphQLObjectType } from "graphql";
import UPLOAD_DIRECTORY_URL from '../config/UPLOAD_DIRECTORY_URL.mjs'; import UPLOAD_DIRECTORY_URL from "../config/UPLOAD_DIRECTORY_URL.mjs";
import FileType from './FileType.mjs'; import FileType from "./FileType.mjs";
export default new GraphQLObjectType({ export default new GraphQLObjectType({
name: 'Query', name: "Query",
fields: () => ({ fields: () => ({
uploads: { uploads: {
description: 'All stored files.', description: "All stored files.",
type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(FileType))), type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(FileType))),
resolve: () => fs.promises.readdir(UPLOAD_DIRECTORY_URL), resolve: () => fs.promises.readdir(UPLOAD_DIRECTORY_URL),
}, },

6
api/schema/index.mjs
View File

@ -1,6 +1,6 @@
import { GraphQLSchema } from 'graphql'; import { GraphQLSchema } from "graphql";
import MutationType from './MutationType.mjs'; import MutationType from "./MutationType.mjs";
import QueryType from './QueryType.mjs'; import QueryType from "./QueryType.mjs";
export default new GraphQLSchema({ export default new GraphQLSchema({
query: QueryType, query: QueryType,

14
api/server.mjs
View File

@ -1,10 +1,10 @@
import { fileURLToPath } from 'url'; import { fileURLToPath } from "url";
import { ApolloServer } from 'apollo-server-koa'; import { ApolloServer } from "apollo-server-koa";
import graphqlUploadKoa from 'graphql-upload/public/graphqlUploadKoa.js'; import graphqlUploadKoa from "graphql-upload/public/graphqlUploadKoa.js";
import Koa from 'koa'; import Koa from "koa";
import makeDir from 'make-dir'; import makeDir from "make-dir";
import UPLOAD_DIRECTORY_URL from './config/UPLOAD_DIRECTORY_URL.mjs'; import UPLOAD_DIRECTORY_URL from "./config/UPLOAD_DIRECTORY_URL.mjs";
import schema from './schema/index.mjs'; import schema from "./schema/index.mjs";
/** /**
* Starts the API server. * Starts the API server.

12
api/storeUpload.mjs
View File

@ -1,6 +1,6 @@
import { createWriteStream, unlink } from 'fs'; import { createWriteStream, unlink } from "fs";
import shortId from 'shortid'; import shortId from "shortid";
import UPLOAD_DIRECTORY_URL from './config/UPLOAD_DIRECTORY_URL.mjs'; import UPLOAD_DIRECTORY_URL from "./config/UPLOAD_DIRECTORY_URL.mjs";
/** /**
* Stores a GraphQL file upload in the filesystem. * Stores a GraphQL file upload in the filesystem.
@ -19,11 +19,11 @@ export default async function storeUpload(upload) {
const writeStream = createWriteStream(storedFileUrl); const writeStream = createWriteStream(storedFileUrl);
// When the upload is fully written, resolve the promise. // When the upload is fully written, resolve the promise.
writeStream.on('finish', resolve); writeStream.on("finish", resolve);
// If there's an error writing the file, remove the partially written file // If there's an error writing the file, remove the partially written file
// and reject the promise. // and reject the promise.
writeStream.on('error', (error) => { writeStream.on("error", (error) => {
unlink(storedFileUrl, () => { unlink(storedFileUrl, () => {
reject(error); reject(error);
}); });
@ -32,7 +32,7 @@ export default async function storeUpload(upload) {
// In Node.js <= v13, errors are not automatically propagated between piped // In Node.js <= v13, errors are not automatically propagated between piped
// streams. If there is an error receiving the upload, destroy the write // streams. If there is an error receiving the upload, destroy the write
// stream with the corresponding error. // stream with the corresponding error.
stream.on('error', (error) => writeStream.destroy(error)); stream.on("error", (error) => writeStream.destroy(error));
// Pipe the upload into the write stream. // Pipe the upload into the write stream.
stream.pipe(writeStream); stream.pipe(writeStream);

3
app/.prettierrc.json
View File

@ -1,4 +1,3 @@
{ {
"proseWrap": "never", "proseWrap": "never"
"singleQuote": true
} }

2
app/components/Header.js
View File

@ -1,4 +1,4 @@
import styles from './Header.module.css'; import styles from "./Header.module.css";
export const Header = (props) => ( export const Header = (props) => (
<header {...props} className={styles.header} /> <header {...props} className={styles.header} />

4
app/components/Page.js
View File

@ -1,5 +1,5 @@
import Head from 'next/head'; import Head from "next/head";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
export const Page = ({ title, children }) => ( export const Page = ({ title, children }) => (
<> <>

2
app/components/Section.js
View File

@ -1,4 +1,4 @@
import styles from './Section.module.css'; import styles from "./Section.module.css";
export const Section = (props) => ( export const Section = (props) => (
<section {...props} className={styles.section} /> <section {...props} className={styles.section} />

18
app/components/UploadBlob.js
View File

@ -1,9 +1,9 @@
import { gql, useApolloClient, useMutation } from '@apollo/client'; import { gql, useApolloClient, useMutation } from "@apollo/client";
import ButtonSubmit from 'device-agnostic-ui/ButtonSubmit.mjs'; import ButtonSubmit from "device-agnostic-ui/ButtonSubmit.mjs";
import Code from 'device-agnostic-ui/Code.mjs'; import Code from "device-agnostic-ui/Code.mjs";
import Fieldset from 'device-agnostic-ui/Fieldset.mjs'; import Fieldset from "device-agnostic-ui/Fieldset.mjs";
import Textbox from 'device-agnostic-ui/Textbox.mjs'; import Textbox from "device-agnostic-ui/Textbox.mjs";
import React from 'react'; import React from "react";
const SINGLE_UPLOAD_MUTATION = gql` const SINGLE_UPLOAD_MUTATION = gql`
mutation singleUpload($file: Upload!) { mutation singleUpload($file: Upload!) {
@ -14,8 +14,8 @@ const SINGLE_UPLOAD_MUTATION = gql`
`; `;
export function UploadBlob() { export function UploadBlob() {
const [name, setName] = React.useState(''); const [name, setName] = React.useState("");
const [content, setContent] = React.useState(''); const [content, setContent] = React.useState("");
const [singleUploadMutation, { loading }] = useMutation( const [singleUploadMutation, { loading }] = useMutation(
SINGLE_UPLOAD_MUTATION SINGLE_UPLOAD_MUTATION
); );
@ -26,7 +26,7 @@ export function UploadBlob() {
const onSubmit = (event) => { const onSubmit = (event) => {
event.preventDefault(); event.preventDefault();
const file = new Blob([content], { type: 'text/plain' }); const file = new Blob([content], { type: "text/plain" });
file.name = `${name}.txt`; file.name = `${name}.txt`;
singleUploadMutation({ variables: { file } }).then(() => { singleUploadMutation({ variables: { file } }).then(() => {

2
app/components/UploadFile.js
View File

@ -1,4 +1,4 @@
import { gql, useApolloClient, useMutation } from '@apollo/client'; import { gql, useApolloClient, useMutation } from "@apollo/client";
const SINGLE_UPLOAD_MUTATION = gql` const SINGLE_UPLOAD_MUTATION = gql`
mutation singleUpload($file: Upload!) { mutation singleUpload($file: Upload!) {

2
app/components/UploadFileList.js
View File

@ -1,4 +1,4 @@
import { gql, useApolloClient, useMutation } from '@apollo/client'; import { gql, useApolloClient, useMutation } from "@apollo/client";
const MULTIPLE_UPLOAD_MUTATION = gql` const MULTIPLE_UPLOAD_MUTATION = gql`
mutation multipleUpload($files: [Upload!]!) { mutation multipleUpload($files: [Upload!]!) {

6
app/components/Uploads.js
View File

@ -1,6 +1,6 @@
import { gql, useQuery } from '@apollo/client'; import { gql, useQuery } from "@apollo/client";
import Scroll from 'device-agnostic-ui/Scroll.mjs'; import Scroll from "device-agnostic-ui/Scroll.mjs";
import Table from 'device-agnostic-ui/Table.mjs'; import Table from "device-agnostic-ui/Table.mjs";
const UPLOADS_QUERY = gql` const UPLOADS_QUERY = gql`
query uploads { query uploads {

4
app/next.config.js
View File

@ -3,8 +3,8 @@ module.exports = {
API_URI: process.env.API_URI, API_URI: process.env.API_URI,
}, },
i18n: { i18n: {
locales: ['en-US'], locales: ["en-US"],
defaultLocale: 'en-US', defaultLocale: "en-US",
}, },
reactStrictMode: true, reactStrictMode: true,
}; };

36
app/pages/_app.js
View File

@ -1,23 +1,23 @@
import 'device-agnostic-ui/theme.css'; import "device-agnostic-ui/theme.css";
import 'device-agnostic-ui/global.css'; import "device-agnostic-ui/global.css";
import 'device-agnostic-ui/Button.css'; import "device-agnostic-ui/Button.css";
import 'device-agnostic-ui/ButtonSubmit.css'; import "device-agnostic-ui/ButtonSubmit.css";
import 'device-agnostic-ui/Code.css'; import "device-agnostic-ui/Code.css";
import 'device-agnostic-ui/Fieldset.css'; import "device-agnostic-ui/Fieldset.css";
import 'device-agnostic-ui/Heading.css'; import "device-agnostic-ui/Heading.css";
import 'device-agnostic-ui/Loading.css'; import "device-agnostic-ui/Loading.css";
import 'device-agnostic-ui/Margin.css'; import "device-agnostic-ui/Margin.css";
import 'device-agnostic-ui/Scroll.css'; import "device-agnostic-ui/Scroll.css";
import 'device-agnostic-ui/Table.css'; import "device-agnostic-ui/Table.css";
import 'device-agnostic-ui/Textbox.css'; import "device-agnostic-ui/Textbox.css";
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
import { createUploadLink } from 'apollo-upload-client'; import { createUploadLink } from "apollo-upload-client";
import Head from 'next/head'; import Head from "next/head";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
const createApolloClient = (cache = {}) => const createApolloClient = (cache = {}) =>
new ApolloClient({ new ApolloClient({
ssrMode: typeof window === 'undefined', ssrMode: typeof window === "undefined",
cache: new InMemoryCache().restore(cache), cache: new InMemoryCache().restore(cache),
link: createUploadLink({ uri: process.env.API_URI }), link: createUploadLink({ uri: process.env.API_URI }),
}); });
@ -49,7 +49,7 @@ App.getInitialProps = async (context) => {
if (context.ctx.req) { if (context.ctx.req) {
const apolloClient = createApolloClient(); const apolloClient = createApolloClient();
try { try {
const { getDataFromTree } = await import('@apollo/client/react/ssr'); const { getDataFromTree } = await import("@apollo/client/react/ssr");
await getDataFromTree( await getDataFromTree(
<App <App
{...props} {...props}

20
app/pages/index.js
View File

@ -1,13 +1,13 @@
import Code from 'device-agnostic-ui/Code.mjs'; import Code from "device-agnostic-ui/Code.mjs";
import Heading from 'device-agnostic-ui/Heading.mjs'; import Heading from "device-agnostic-ui/Heading.mjs";
import Margin from 'device-agnostic-ui/Margin.mjs'; import Margin from "device-agnostic-ui/Margin.mjs";
import { Header } from '../components/Header'; import { Header } from "../components/Header";
import { Page } from '../components/Page'; import { Page } from "../components/Page";
import { Section } from '../components/Section'; import { Section } from "../components/Section";
import { UploadBlob } from '../components/UploadBlob'; import { UploadBlob } from "../components/UploadBlob";
import { UploadFile } from '../components/UploadFile'; import { UploadFile } from "../components/UploadFile";
import { UploadFileList } from '../components/UploadFileList'; import { UploadFileList } from "../components/UploadFileList";
import { Uploads } from '../components/Uploads'; import { Uploads } from "../components/Uploads";
const IndexPage = () => ( const IndexPage = () => (
<Page title="Apollo upload examples"> <Page title="Apollo upload examples">