DEV Community: Ashish K Mishra

20+ Free Resources for YouTube Content Creators

Ashish K Mishra — Wed, 19 Jul 2023 06:39:40 +0000

As a YouTuber, having access to the right resources can drastically enhance the quality of your content and help you reach more viewers. In this guide, we've curated some of the best resources available to support you in your journey. This list will be updated monthly with 20+ new resources in each issue.

Content Creation Tools

Canva: A simple graphic design platform that allows you to create thumbnails, banners, and channel art for free^1.
TubeBuddy: This browser extension offers advanced keyword research tools, productivity enhancements, and bulk processing for your YouTube videos2.
InVideo: This online video editor helps you create professional-quality videos with thousands of templates3.

Royalty-free Music and Sounds

Epidemic Sound: Access thousands of copyright-free tracks and sound effects for your videos4.
YouTube Audio Library: Free music and sound effects provided by YouTube5.
SEO and Analytics

vidIQ: A suite of tools providing insights into how to get more views, subscribers, and better SEO for your YouTube channel6.
Social Blade: Check your channel stats, compare yourself to others, and get insights to grow your channel7.
Collaboration Platforms

CollabSpace: Find other creators to collaborate with and grow your audience8.
Online Learning

Creator Academy: YouTube's official resource for learning about channel growth, monetization, and more9.
Skillshare: Online classes in animation, video editing, storytelling, and more10.
Visual Assets

Unsplash: Free, high-resolution images that you can use in your videos or thumbnails11.
Giphy: A library of GIFs to add some fun to your videos12.
Flaticon: Access thousands of free vector icons13.
Script Writing and Planning

Celtx: A free tool for scriptwriting and pre-production planning14.
Livestream Tools

StreamYard: A live streaming studio in your browser15.
Restream: Stream live to multiple platforms at once16.
Captioning and Transcriptions

Rev: Offers both automated and human-generated caption and transcription services17.
Subly: Automatically transcribe and add captions to your videos18.
Equipment Reviews and Tutorials

CNET: Detailed reviews and buying guides for cameras, mics, lighting, and other equipment19.
B&H Explora: Tutorials and advice on video equipment20.
Community and Networking

YouTuber Subreddit: A Reddit community for sharing tips and experiences with other YouTube creators21.
Monetization Tools

Patreon: A platform that allows creators to earn income through a membership model22.
Microslots: An innovative platform for monetizing your YouTube comments by pinning advertisements. Be the first to know when we launch by signing up here23.

That's all for this issue! If there's a resource you think should be included in future issues, feel free to leave a comment. Stay tuned for more valuable resources in our next issue.

Sources:

Footnotes
**https://www.canva.com/ ↩

https://www.tubebuddy.com/ ↩

https://invideo.io/ ↩

https://www.epidemicsound.com/ ↩

https://www.youtube.com/audiolibrary/music ↩

https://vidiq.com/ ↩

https://socialblade.com/ ↩

https://collabspace.com/ ↩

https://creatoracademy.youtube.com/ ↩

https://www.skillshare.com/ ↩

https://unsplash.com/ ↩

https://giphy.com/ ↩

https://www.flaticon.com/ ↩

https://www.celtx.com/index.html ↩

https://streamyard.com/ ↩

https://restream.io/ ↩

https://www.rev.com/ ↩

https://getsubly.com/ ↩

https://www.cnet.com/ ↩

https://www.bhphotovideo.com/explora/ ↩

https://www.reddit.com/r/YouTubers/ ↩

https://www.patreon.com/ ↩

https://microslots.io/ ↩**

Handle Multiple Queries & Mutations in React Form using Apollo Client

Ashish K Mishra — Thu, 15 Jun 2023 16:36:16 +0000

In this tutorial, we'll explore how to handle multiple queries and mutations in a controlled form using Apollo Client in a React application. We'll leverage Apollo Client to fetch data from a GraphQL API and update the form state based on user input. We'll also perform mutations to update the data in the database.

Prerequisites:

Basic knowledge of React and GraphQL
Familiarity with Apollo Client and controlled forms in React

Let's dive into the step-by-step process:

Step 1: Set up Apollo Client
Start by setting up Apollo Client in your React application. Install the required packages by running the following command in your project directory:

npm install @apollo/client graphql

Next, create an instance of Apollo Client and configure it with the necessary details. In your index.js or App.js file, import the required dependencies:

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

Create the Apollo Client instance:

const client = new ApolloClient({
  uri: 'YOUR_GRAPHQL_ENDPOINT_URL',
  cache: new InMemoryCache(),
});

Replace 'YOUR_GRAPHQL_ENDPOINT_URL' with the actual GraphQL API endpoint URL.

Step 2: Define GraphQL Queries
Identify the data you need for your form and write the GraphQL queries to fetch that data. For example, let's assume we have a form that requires fetching a list of countries and a user's profile.

Define the GraphQL queries using the gql tag from the graphql package. Here's an example of querying countries:

import { gql } from '@apollo/client';

const GET_COUNTRIES = gql`
  query GetCountries {
    countries {
      id
      name
    }
  }
`;

Similarly, define a query to fetch a user's profile:

const GET_USER_PROFILE = gql`
  query GetUserProfile($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
    }
  }
`;

Step 3: Create the Form Component
Build a React form component that includes the necessary input fields. In this example, we'll use a controlled form approach, where the form fields are controlled by React state.

Import the necessary dependencies and hooks:

import React, { useState } from 'react';
import { useQuery, useMutation } from '@apollo/client';

Create the form component:

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    countryId: '',
  });

  const { loading: countriesLoading, error: countriesError, data: countriesData } = useQuery(GET_COUNTRIES);
  const { loading: userProfileLoading, error: userProfileError, data: userProfileData } = useQuery(GET_USER_PROFILE, {
    variables: { userId: 'USER_ID' }, // Replace with the actual user ID
  });

  const [updateUserProfile] = useMutation(UPDATE_USER_PROFILE);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    const { name, email, countryId } = formData;

    // Execute the mutation
    updateUserProfile({ variables: { userId: 'USER

_ID', name, email, countryId } })
      .then((response) => {
        // Handle success
      })
      .catch((error) => {
        // Handle error
      });
  };

  if (countriesLoading || userProfileLoading) {
    return <div>Loading...</div>;
  }

  if (countriesError || userProfileError) {
    return <div>Error fetching data.</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name} onChange={handleInputChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleInputChange} />
      </label>
      <label>
        Country:
        <select name="countryId" value={formData.countryId} onChange={handleInputChange}>
          <option value="">Select a country</option>
          {countriesData.countries.map((country) => (
            <option key={country.id} value={country.id}>
              {country.name}
            </option>
          ))}
        </select>
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

Replace 'USER_ID' with the actual user ID.

Step 4: Perform Mutations on Form Submission
Define the GraphQL mutations required to update or create data in the database. For example, let's assume we have a mutation to update a user's profile.

Define the GraphQL mutation using the gql tag:

const UPDATE_USER_PROFILE = gql`
  mutation UpdateUserProfile($userId: ID!, $name: String!, $email: String!, $countryId: ID!) {
    updateUser(id: $userId, name: $name, email: $email, countryId: $countryId) {
      id
      name
      email
      countryId
    }
  }
`;

In the form component, import the necessary dependencies:

import { useMutation } from '@apollo/client';

Handle form submission and execute the mutation:

const MyForm = () => {
  // ...

  const handleSubmit = (event) => {
    event.preventDefault();

    const { name, email, countryId } = formData;

    // Execute the mutation
    updateUserProfile({ variables: { userId: 'USER_ID', name, email, countryId } })
      .then((response) => {
        // Handle success
      })
      .catch((error) => {
        // Handle error
      });
  };

  // ...
};

Replace 'USER_ID' with the actual user ID.

Step 5: Conclusion
In this tutorial, we learned how to handle multiple queries and mutations in a controlled form using Apollo Client in a React application. We set up Apollo Client, defined GraphQL queries to fetch data, created a controlled form component to handle user input, performed mutations on form submission, and updated the form state accordingly. By leveraging Apollo Client and controlled forms in React, we can easily manage complex form interactions and data flow in our applications.

Remember to replace 'YOUR_GRAPHQL_ENDPOINT_URL' and 'USER_ID' with your actual GraphQL API endpoint URL and user ID, respectively.

How to write "Create mutations" in React using Apollo Client

Ashish K Mishra — Thu, 15 Jun 2023 06:08:38 +0000

To create mutations with React Apollo Client, you'll need to follow a few steps.

Step 1: Set up your React project Create a new React project or navigate to your existing project directory. You can use create-react-app to quickly set up a new project by running the following command in your terminal:

npx create-react-app my-apollo-app

Step 2: Install required dependencies Navigate to your project directory and install the necessary dependencies by running the following command:


cd my-apollo-app
npm install @apollo/client graphql

This installs the Apollo Client and GraphQL packages required for performing mutations.

Step 3: Configure Apollo Client Create a new file called apolloClient.js in the src directory and add the following code to configure Apollo Client:


import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'YOUR_GRAPHQL_API_ENDPOINT',
  cache: new InMemoryCache(),
});

export default client;

Replace 'YOUR_GRAPHQL_API_ENDPOINT' with the actual GraphQL API endpoint URL.

Step 4: Create a mutation component In your React project, create a new component for performing the mutation. For example, you can create a file called MutationComponent.js in the src directory. Here's an example of how the component may look:

import React from 'react';
import { gql, useMutation } from '@apollo/client';

const CREATE_POST = gql`
  mutation CreatePost($title: String!, $content: String!) {
    createPost(title: $title, content: $content) {
      id
      title
      content
    }
  }
`;

const MutationComponent = () => {
  const [title, setTitle] = React.useState('');
  const [content, setContent] = React.useState('');

  const [createPost, { loading, error }] = useMutation(CREATE_POST);

  const handleSubmit = (e) => {
    e.preventDefault();
    createPost({ variables: { title, content } })
      .then((response) => {
        console.log(response.data);
        // Handle successful mutation
      })
      .catch((error) => {
        console.error(error);
        // Handle error
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Title"
        />
        <input
          type="text"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Content"
        />
        <button type="submit" disabled={loading}>
          {loading ? 'Submitting...' : 'Submit'}
        </button>
      </form>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
};

export default MutationComponent;

Step 5: Use the mutation component In your main App component or any other component where you want to use the mutation, import the MutationComponent and render it:

import React from 'react';
import MutationComponent from './MutationComponent';

const App = () => {
  return (
    <div>
      <MutationComponent />
    </div>
  );
};

export default App;

That's it! You have now set up a mutation component using React Apollo Client. When you submit the form, it will trigger the mutation and send the data to the GraphQL API endpoint specified in the apolloClient.js configuration file.