How to use @shopify/react-network - 10 common examples

To help you get started, we’ve selected a few @shopify/react-network examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Shopify / quilt / packages / react-server / src / render / render.tsx View on Github external
const immediateAsyncAssets = asyncAssetManager.used(
        AssetTiming.Immediate,
      );
      const [styles, scripts] = await Promise.all([
        assets.styles({name: 'main', asyncAssets: immediateAsyncAssets}),
        assets.scripts({name: 'main', asyncAssets: immediateAsyncAssets}),
      ]);

      const response = stream(
        
          {app}
        ,
      );

      ctx.set(Header.ContentType, 'text/html');
      ctx.body = response;
    } catch (error) {
      const errorMessage = `React server-side rendering error:\n${error.stack ||
        error.message}`;

      logger.log(errorMessage);
      ctx.status = StatusCode.InternalServerError;

      // eslint-disable-next-line no-process-env
      if (process.env.NODE_ENV === 'development') {
        ctx.body = errorMessage;
      } else {
        ctx.throw(StatusCode.InternalServerError, error);
      }
    }
  }
github Shopify / quilt / packages / react-server / src / render / render.tsx View on Github external
]);

      const response = stream(
        
          {app}
        ,
      );

      ctx.set(Header.ContentType, 'text/html');
      ctx.body = response;
    } catch (error) {
      const errorMessage = `React server-side rendering error:\n${error.stack ||
        error.message}`;

      logger.log(errorMessage);
      ctx.status = StatusCode.InternalServerError;

      // eslint-disable-next-line no-process-env
      if (process.env.NODE_ENV === 'development') {
        ctx.body = errorMessage;
      } else {
        ctx.throw(StatusCode.InternalServerError, error);
      }
    }
  }
github Shopify / quilt / packages / react-server / src / render / render.tsx View on Github external
);

      ctx.set(Header.ContentType, 'text/html');
      ctx.body = response;
    } catch (error) {
      const errorMessage = `React server-side rendering error:\n${error.stack ||
        error.message}`;

      logger.log(errorMessage);
      ctx.status = StatusCode.InternalServerError;

      // eslint-disable-next-line no-process-env
      if (process.env.NODE_ENV === 'development') {
        ctx.body = errorMessage;
      } else {
        ctx.throw(StatusCode.InternalServerError, error);
      }
    }
  }
github Shopify / quilt / packages / koa-react-sidecar / src / render / render.tsx View on Github external
{app}
              
            
          );
        },
      });
    } catch (error) {
      logger.error(error);
      throw error;
    }

    applyToContext(ctx, networkManager);
    const response = renderToString({app});

    ctx.set(Header.ContentType, 'text/html');
    ctx.body = response;

    return response;
  };
}
github Shopify / quilt / packages / react-graphql / src / createClient.ts View on Github external
server,
  initialData,
  graphQLEndpoint = '/graphql',
  connectToDevTools,
  headers = {},
}: Options) {
  const cache = new InMemoryCache({
    dataIdFromObject: object => object.id,
  });

  const link = createHttpLink({
    credentials: 'include',
    uri: graphQLEndpoint,
    headers: {
      [Header.Accept.toLowerCase()]: 'application/json',
      [Header.ContentType.toLowerCase()]: 'application/json',
      ...headers,
    },
  });

  return new ApolloClient({
    link,
    ssrMode: server,
    ssrForceFetchDelay: 100,
    cache: initialData ? cache.restore(initialData) : cache,
    connectToDevTools: !server && connectToDevTools,
  });
}
github Shopify / quilt / packages / react-server / src / providers / providers.tsx View on Github external
return function CombinedProvider({children}: Props) {
    const csrfToken = useRequestHeader('x-csrf-token') || '';

    return (
      
        
          {children}
        
      
    );
  };
}
github Shopify / quilt / packages / react-server / src / render / render.tsx View on Github external
async function renderFunction(ctx: Context) {
    const logger = getLogger(ctx) || console;
    const assets = getAssets(ctx);

    const networkManager = new NetworkManager({
      headers: ctx.headers,
      cookies: ctx.request.headers.cookie || '',
    });
    const htmlManager = new HtmlManager();
    const asyncAssetManager = new AsyncAssetManager();
    const hydrationManager = new HydrationManager();

    function Providers({children}: {children: React.ReactElement}) {
      return (
        
          
            
              {children}
github Shopify / quilt / packages / koa-react-sidecar / src / render / render.tsx View on Github external
return async function render(ctx: RenderContext) {
    const app = renderFunction(ctx);
    const networkManager = new NetworkManager();
    const htmlManager = new HtmlManager();

    try {
      await extract(app, {
        decorate(app) {
          return (
            
              
                {app}
              
            
          );
        },
      });
    } catch (error) {
      logger.error(error);
github Shopify / quilt / packages / react-server / src / render / render.tsx View on Github external
);
        },
        afterEachPass({renderDuration, resolveDuration, index, finished}) {
          const pass = `Pass number ${index} ${
            finished ? ' (this was the final pass)' : ''
          }`;
          const rendering = `Rendering took ${renderDuration}ms`;
          const resolving = `Resolving promises took ${resolveDuration}ms`;

          logger.log(pass);
          logger.log(rendering);
          logger.log(resolving);
        },
        ...options,
      });
      applyToContext(ctx, networkManager);

      const immediateAsyncAssets = asyncAssetManager.used(
        AssetTiming.Immediate,
      );
      const [styles, scripts] = await Promise.all([
        assets.styles({name: 'main', asyncAssets: immediateAsyncAssets}),
        assets.scripts({name: 'main', asyncAssets: immediateAsyncAssets}),
      ]);

      const response = stream(
        
          {app}
        ,
      );

      ctx.set(Header.ContentType, 'text/html');
github Shopify / quilt / packages / koa-react-sidecar / src / render / render.tsx View on Github external
decorate(app) {
          return (
            
              
                {app}
              
            
          );
        },
      });
    } catch (error) {
      logger.error(error);
      throw error;
    }

    applyToContext(ctx, networkManager);
    const response = renderToString({app});

    ctx.set(Header.ContentType, 'text/html');
    ctx.body = response;

    return response;
  };
}

@shopify/react-network

A collection of components that allow you to set common HTTP headers from within your React application

MIT
Latest version published 1 month ago

Package Health Score

87 / 100
Full package analysis

Similar packages