Revert changes to filenames for non intro docs

docs/shared/link-chain.mdx

@@ -1,4 +1,4 @@
-```jsx title="main.jsx""
+```js title="index.js"
 import { ApolloClient, InMemoryCache, HttpLink, from } from "@apollo/client";
 import { onError } from "@apollo/client/link/error";
 

docs/source/data/fragments.md

@@ -100,7 +100,7 @@ Starting in Apollo Client 3.7, fragments can be registered with your `InMemoryCa
 
 Let's look at an example in React.
 
-```jsx title="main.jsx" {7-12}
+```js title="index.js" {7-12}
 import { ApolloClient, gql, InMemoryCache } from "@apollo/client";
 import { createFragmentRegistry } from "@apollo/client/cache";
 
@@ -143,7 +143,7 @@ function ToDoList() {
 
 Queries can declare their own local versions of named fragments which will take precendence over ones registered via `createFragmentRegistry`, even if the local fragment is only indirectly referenced by other registered fragments. Take the following example:
 
-```jsx title="main.jsx" {7-17}
+```js title="index.js" {7-17}
 import { ApolloClient, gql, InMemoryCache } from "@apollo/client";
 import { createFragmentRegistry } from "@apollo/client/cache";
 

docs/source/data/queries.mdx

@@ -24,7 +24,7 @@ The `useQuery` [React hook](https://react.dev/reference/react) is the primary AP
 
 Let's look at an example. First, we'll create a GraphQL query named `GET_DOGS`. Remember to wrap query strings in the `gql` function to parse them into query documents:
 
-```jsx title="main.jsx"
+```js title="index.js"
 import { gql, useQuery } from '@apollo/client';
 
 const GET_DOGS = gql`
@@ -39,7 +39,7 @@ const GET_DOGS = gql`
 
 Next, we'll create a component named `Dogs`. Inside it, we'll pass our `GET_DOGS` query to the `useQuery` hook:
 
-```jsx title="main.jsx"
+```jsx title="index.js"
 function Dogs({ onDogSelected }) {
   const { loading, error, data } = useQuery(GET_DOGS);
 
@@ -73,7 +73,7 @@ Whenever Apollo Client fetches query results from your server, it automatically
 
 To see this caching in action, let's build a new component called `DogPhoto`. `DogPhoto` accepts a prop called `breed` that reflects the current value of the dropdown menu in our `Dogs` component:
 
-```jsx title="main.jsx"
+```jsx title="index.js"
 const GET_DOG_PHOTO = gql`
   query Dog($breed: String!) {
     dog(breed: $breed) {
@@ -111,7 +111,7 @@ Sometimes, you want to make sure that your query's cached data is up to date wit
 
 Polling provides near-real-time synchronization with your server by executing your query periodically at a specified interval. To enable polling for a query, pass a `pollInterval` configuration option to the `useQuery` hook with an interval in milliseconds:
 
-```jsx title="main.jsx" {4}
+```jsx title="index.js" {4}
 function DogPhoto({ breed }) {
   const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
     variables: { breed },
@@ -143,7 +143,7 @@ You can optionally provide a new `variables` object to the `refetch` function.
 If you avoid passing a `variables` object and use only `refetch()`, the query
 uses the same `variables` that it used in its previous execution.
 
-```jsx {2,12} title="main.jsx"
+```jsx {2,12} title="index.js"
 function DogPhoto({ breed }) {
   const { loading, error, data, refetch } = useQuery(GET_DOG_PHOTO, {
     variables: { breed },
@@ -192,7 +192,7 @@ Let's return to our refetching example from the previous section. If you click t
 The `useQuery` hook's result object provides fine-grained information about the status of the query via the `networkStatus` property. To take advantage
 of this information, we set the `notifyOnNetworkStatusChange` option to `true` so our [query component](../api/react/components/ "Components - Client (React) - Apollo GraphQL Docs") re-renders while a refetch is in flight:
 
-```jsx title="main.jsx" {4,8,12}
+```jsx title="index.js" {4,8,12}
 import { NetworkStatus } from '@apollo/client';
 
 function DogPhoto({ breed }) {
@@ -242,7 +242,7 @@ The `useLazyQuery` hook is perfect for executing queries in response to events b
 
 Here's an example:
 
-```jsx {2,5,13} title="main.jsx"
+```jsx {2,5,13} title="index.js"
 import React from 'react';
 import { useLazyQuery } from '@apollo/client';
 

docs/source/data/subscriptions.mdx

@@ -111,7 +111,7 @@ npm install graphql-ws
 
 Import and initialize a `GraphQLWsLink` object in the same project file where you initialize `ApolloClient`:
 
-```jsx title="main.jsx"
+```js title="index.js"
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
 import { createClient } from 'graphql-ws';
 
@@ -130,7 +130,7 @@ To support this, the `@apollo/client` library provides a `split` function that l
 
 The following example expands on the previous one by initializing both a `GraphQLWsLink` _and_ an `HttpLink`. It then uses the `split` function to combine those two `Link`s into a _single_ `Link` that uses one or the other according to the type of operation being executed.
 
-```jsx title="main.jsx"
+```js title="index.js"
 import { split, HttpLink } from '@apollo/client';
 import { getMainDefinition } from '@apollo/client/utilities';
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
@@ -168,7 +168,7 @@ Using this logic, queries and mutations will use HTTP as normal, and subscriptio
 
 After you define your link chain, you provide it to Apollo Client via the `link` constructor option:
 
-```jsx {6} title="main.jsx"
+```js {6} title="index.js"
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 // ...code from the above example goes here...

docs/source/development-testing/client-schema-mocking.mdx

@@ -26,7 +26,7 @@ Our client application can define a [client-side schema](../local-state/client-s
 
 This client-side schema extends the `Rocket` type to add a `description` field (make sure to name the variable `typeDefs` as shown):
 
-```jsx title="main.jsx"
+```js title="index.js"
 const typeDefs = gql`
   extend type Rocket {
     description: String
@@ -36,7 +36,7 @@ const typeDefs = gql`
 
 We can then provide this schema to the `ApolloClient` constructor, like so:
 
-```jsx {4} title="main.jsx"
+```js {4} title="index.js"
 const client = new ApolloClient({
   uri: 'http://localhost:4000/graphql',
   cache: new InMemoryCache(),
@@ -50,7 +50,7 @@ Our client app doesn't yet know how to populate the `Rocket.description` field.
 
 Let's define our `read` function in the configuration object we provide to the `InMemoryCache` constructor:
 
-```jsx {5-9} title="main.jsx"
+```js {5-9} title="index.js"
 const cache = new InMemoryCache({
   typePolicies: {
     Rocket: {
@@ -68,7 +68,7 @@ const cache = new InMemoryCache({
 
 This enables us to query the field, but we might not want to show the same boilerplate description for every rocket. To add variety to our mocked output, we can use a library like [faker.js](https://github.com/faker-js/faker):
 
-```jsx title="main.jsx"
+```js title="index.js"
 import { faker } from "@faker-js/faker";
 
 // Returns 1 or 2 sentences of Lorem Ipsum

docs/source/pagination/offset-based.mdx

@@ -27,7 +27,7 @@ Apollo Client provides an `offsetLimitPagination` helper function that you can u
 
 This example uses `offsetLimitPagination` to generate a field policy for `Query.feed`:
 
-```jsx {2,8} title="main.jsx"
+```js {2,8} title="index.js"
 import { InMemoryCache } from "@apollo/client";
 import { offsetLimitPagination } from "@apollo/client/utilities";
 
@@ -87,7 +87,7 @@ In [the example above](#using-with-fetchmore), the GraphQL server returns indivi
 
 Because the `offsetLimitPagination` helper is currently defining your field policy, you combine your `read` function with the helper's result, like so:
 
-```jsx {8-13} title="main.jsx"
+```js {8-13} title="index.js"
 import { InMemoryCache } from "@apollo/client";
 import { offsetLimitPagination } from "@apollo/client/utilities";